元素选择器
首先需要知道元素之间的关系：
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素
- 祖先元素：直接或间接包含后代元素的元素
- 后代元素：直接或间接被祖先元素包含的元素
- 兄弟元素：拥有相同父元素的元素
后代元素选择器
- 作用：选中指定元素的指定后代元素。
- 语法：祖先元素 后代元素 {}（空格隔开）
div span {
color: red;
}
<div>
<span>第一个span。</span> <!--颜色为red-->
<span>第二个span。</span> <!--颜色为red-->
</div>
子元素选择器
- 作用：选择指定父元素的指定子元素
- 语法：父元素 > 子元素
div > span {
color: red;
}
<div>
<span>第一个span。</span> <!-- 颜色为red -->
<span>第二个span。</span> <!-- 颜色为red -->
<ul>
<span>ul下的span</span><!-- 颜色不变 -->
</ul>
</div>
伪类
表示元素的一种特殊状态。
- :active 向被激活的元素添加样式。
- :focus 向拥有键盘输入焦点的元素添加样式。
- :hover 当鼠标悬浮在元素上方时，向元素添加样式。
- :link 向未被访问的链接添加样式。
- :visited 向已被访问的链接添加样式。（隐私问题只能设置颜色）
- :first-child 向元素的第一个子元素添加样式。
- :lang 向带有指定 lang 属性的元素添加样式。
- ::selection匹配被用户选中或处于高亮状态的部分。
a:link { /* 未访问的链接 */
color: #FF0000
}
伪元素
表示元素中一些特殊的位置。
- :first-letter 向文本的第一个字母添加特殊样式。
- :first-line 向文本的首行添加特殊样式。
- :before 在元素之前添加内容。
- :after 在元素之后添加内容。
h1:after {
content:url(logo.gif);
}
属性选择器
- 作用：可以根据元素中的属性或属性值来选取指定元素。
- 语法：
-
- [属性名] 选取含有指定属性的元素
-
- [属性名="属性值"] 选取含有指定属性值的元素
-
- [属性名^="属性值"] 选取属性值以指定内容开头的元素
-
- [属性名$="属性值"] 选取属性值以指定内容结尾的元素
-
- [属性名*="属性值"] 选取属性值以包含指定内容的元素
p[title] {
background-color: yellow;
}
p[title="hello"] {
background-color: yellow;
}
<p title="hello">文字</p>
其他子元素选择器
- :first-child 指定父元素中第一个元素且为指定元素的样式。
p:first-child { //匹配作为任何元素的第一个子元素的 p 元素
color: red;
}
<div>
<div>段落</div> <!--如果该元素为p，则字体为红色-->
<p>段落</p>
<p>段落</p>
</div>
<div>
<p>段落</p> <!--因为是div的第一个子元素且为p元素，所以字体为红色-->
<p>段落</p>
</div>
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
- :last-child 指定父元素中最后一个元素且为指定元素的样式。
p:last-child { //匹配作为任何元素的第一个子元素的 p 元素
color: red;
}
<div>
<p>段落</p>
<p>段落</p>
<div>段落</div> <!--如果该元素为p，则字体为红色-->
</div>
<div>
<p>段落</p>
<p>段落</p> <!--因为是div的最后一个子元素且为p元素，所以字体为红色-->
</div>
提示：最常见的错误是认为 p:last-child 之类的选择器会选择 p 元素的最后一个元素。
- :nth-child 匹配第n个位置，且为指定元素的元素。even表示偶数位置，odd表示奇数位置的元素。
p:nth-child(2) // 匹配其父元素的第二个子元素为 p 的颜色
{
color:red;
}
<div>
<div>段落</div>
<p>段落。</p>
<p>段落。</p>
</div>
- :first-of-type 选择特定类型的第一个元素。
p:last-of-type
{
background:red;
}
<div>第一个段落。</div>
<p>第二个段落。</p> <!--颜色为red-->
<p>第三个段落。</p>
<p>第四个段落。</p>
- :last-of-type 选择特定类型的最后一个元素。
p:last-of-type
{
background:red;
}
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p> <!--颜色为red-->
<div>第四个段落。</div>
- :nth-of-type 选择特定类型的第n个元素。
p:nth-child(3) // 匹配其父元素的第二个子元素为 p 的背景色
{
background:red;
}
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p> <!--颜色为red-->
<div>第四个段落。</div>
兄弟元素选择器
- 作用：选择一个元素紧挨着的指定的兄弟（不能有任何元素隔着）
- 语法：元素1 ~ 元素2 （选中元素1的紧挨着的前一个元素是元素2的元素）； 元素1 + 元素2（选中元素1的紧挨着的后一个元素是元素2的元素）
否定伪类
- 作用：可以从已选中的元素中剔除某些元素
- 语法： :not(选择器)
p:not(.hello) {
background: yellow
}
<p>第一个段落。</p> <!-- 背景yellow -->
<p class="hello">第二个段落。 <!-- 无背景 -->
<p>第三个段落。</p> <!-- 背景yellow -->
<p>第四个段落。</p> <!-- 背景yellow -->
