元素选择器
首先需要知道元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素
后代元素：直接或间接被祖先元素包含的元素
兄弟元素：拥有相同父元素的元素
后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素 {}
div span {
color: red;
}
<div>
<span>第一个span。</span> // 颜色为red
<span>第二个span。</span> // 颜色为red
</div>
子元素选择器
作用：选择指定父元素的指定子元素
语法：父元素 > 子元素
div > span {
color: greenyellow;
}
<div>
<span>第一个span。</span> // 颜色为greenyellow
<span>第二个span。</span> // 颜色为greenyellow
<div>第三个元素</div> // 颜色不变
</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;
}
<h1>这是标题</h1> // 没有元素颜色为red
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
- :last-child
指定父元素中最后一个元素的样式。
p:last-child // 指定父元素中最后一个p元素的背景色
{
background:#ff0000;
}
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<h1>这是标题</h1> // 没有元素背景#ff0000
提示：最常见的错误是认为 p:last-child 之类的选择器会选择 p 元素的最后一个元素。
- :nth-child
匹配第n个位置，且为指定元素的元素。even表示偶数位置，odd表示奇数位置的元素。
p:nth-child(2) // 匹配其父元素的第二个子元素为 p 的背景色
{
background:#ff0000;
}
<h1>这是标题</h1>
<p>第一个段落。</p> // 颜色为#ff0000
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
- :first-of-type
选择特定类型的第一个元素。
p:first-of-type
{
background:#ff0000;
}
<h1>这是标题</h1>
<p>第一个段落。</p> // 颜色为#ff0000
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
- :last-of-type
选择特定类型的最后一个元素。
p:last-of-type
{
background:#ff0000;
}
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>// 颜色为#ff0000
<h1>这是标题</h1>
- :nth-of-type
选择特定类型的第n个元素。
p:nth-child(2) // 匹配其父元素的第二个子元素为 p 的背景色
{
background:#ff0000;
}
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p> // 颜色为#ff0000
<p>第三个段落。</p>
<p>第四个段落。</p>
兄弟元素选择器
作用：选择一个元素紧挨着的指定的兄弟（不能有任何元素隔着）
语法：元素1 ~ 元素2 （选中元素1的紧挨着的前一个元素是元素2的元素）
元素1 + 元素2（后一个）
否定伪类
作用：可以从已选中的元素中剔除某些元素
语法： :not(选择器)
p:not(.hello) {
background: yellow
}
<p>第一个段落。</p> // 背景yellow
<p class="hello">第二个段落。 // 无背景
<p>第三个段落。</p> // 背景yellow
<p>第四个段落。</p> // 背景yellow
