如果你不知道什么是CSS选择器，请先看上篇文章
1.CSS层次选择器
通过HTML的文档对象模型(DOM)中元素间的层次选择元素
常用的层次选择器如下：
CSS后代选择器
使用空格连接，匹配A标签中的全部B标签
代码示例
<style>
ul li{
color: blue;
}
</style>
<ul>
<li>文本1</li>
<li>文本2</li>
<ol>
<li>文本3</li>
</ol>
</ul>预览
解释
<style>标签中“ul li”表示选中<ul>标签中全部<li>标签，包含子层级标签。即<ul>标签中所有<li>标签中的字都会变为蓝色，无论在哪个层级
这就是后代选择器
CSS子选择器
使用“>”标识符链接，匹配A标签内的第一代B标签，即直接子标签
代码示例
<style>
ul>li{
color: blue;
}
</style>
<ul>
<li>文本1</li>
<li>文本2</li>
<ol>
<li>文本3</li>
</ol>
</ul>预览
解释
<style>标签中“ul>li”表示选中<ul>标签中全部<li>标签，但不包含子层级标签。
子选择器只会选中直接子标签，不会选中子标签中其他层级的标签
示例代码中“文本3”的父级标签为<ol>而非<ul>，也就是说“文本3”不属于<ul>的直接子标签所以不会被选中，即字体不会变蓝
CSS相邻兄弟选择器
使用“+”标识符链接，匹配紧位于A标签后的同级B标签
代码示例
<style>
li+ol{
color: blue;
}
</style>
<ul>
<li>文本1</li>
<li>文本2</li>
<ol>
<li>文本3</li>
</ol>
<ol>
<li>文本4</li>
</ol>
</ul>预览
解释
<style>标签中“li+ol”表示选中与<li>标签同级并且紧位于后面的<ol>标签
观察示例代码，<ul>标签中<li>标签与第一个<ol>为同级标签，并且<ol>标签仅位于<li>标签后面，所以<ol>标签会被选中，即字体变为蓝色
而第二个<ol>标签即“文本4”与<li>标签不挨着，即不是相邻兄弟，所以不会被选中
CSS通用兄弟选择器
使用“~”标识符链接，匹配A标签后的所有B标签
代码示例
<style>
li~ol{
color: blue;
}
</style>
<ul>
<li>文本1</li>
<li>文本2</li>
<ol>
<li>文本3</li>
</ol>
<ol>
<li>文本4</li>
</ol>
</ul>预览
解释
<style>标签中“li~ol”表示选中与<li>标签同级的多个<ol>标签
观察示例代码，<ul>标签中最后一个<li>标签到最后一个<ol>标签全部被选中，即“文本3”和“文本4”所在的有序列表变为蓝色
注意<li>标签与<ol>标签中间不能有除<ol>外的标签，否则不符合兄弟标签，即不会被选中
2.CSS结构伪类选择器
CSS3中新增的选择器，通过HTML文档对象模型(DOM)中的标签结构选择标签
常见的CSS结构伪类选择器类型
- :first-child选择器：父级元素的第一个子元素
- :last-child选择器：父级元素的最后一个子元素
- :nth-child(n)选择器：父级元素的第n个子元素
- :first-of-type选择器：父级元素的第一个相同类型子元素
- :first-of-type选择器：父级元素的最后一个相同类型子元素
- :nth-of-type(n)选择器：父级元素的第n个相同类型子元素
以上说明使用较为官方的说法，具体使用看下面预览就清楚了
由于类型比较多，使用起来大同小异，这里就不挨个说了，具体用法写在示例代码的注释中
代码示例
<style>
ol li:first-child {
background: red;
}
/* 选中<ol>标签中第一个<li>子标签 */
/* 并将文本背景颜色设置为红色 */
ol li:last-child {
background: green;
}
/* 选中<ol>中最后一个<li>子标签 */
/* 并将文本背景颜色设置为绿色 */
ol li:nth-child(2) {
background: pink;
}
/* 选中<ol>中最第二个<li>子标签 */
/* 并将文本背景颜色设置为粉色 */
p:first-of-type {
background: blue;
}
/* 选择第一个<p>标签 */
/* 并将文本背景颜色设置为深蓝色 */
p:last-of-type {
background: skyblue;
}
/* 选择最后一个<p>标签 */
/* 并将文本背景颜色设置为天蓝色 */
p:nth-of-type(2) {
background: yellowgreen;
}
/* 选择第二个<p>标签 */
/* 并将文本背景颜色设置为黄绿色 */
</style>
<ol>
<li><a href="#">文本1</a></li>
<!-- 这是<ol>标签中第一个<li>子标签 -->
<li><a href="#">文本2</a></li>
<!-- 这是<ol>标签中第二个<li>子标签 -->
<li><a href="#">文本3</a></li>
<!-- 这是<ol>标签中最后一个<li>子标签 -->
</ol>
<p>文本4</p>
<!-- 这是第一个<p>标签 -->
<p>文本5</p>
<!-- 这是第二个<p>标签 -->
<p>文本6</p>
<!-- 这是最后一个<p>标签 -->预览
通过对比代码中注释与图片中文本背景颜色，可以清晰的看到不同类型的CSS结构伪类选择器的具体用法
3.CSS属性选择器
根据HTML标签的属性及属性值选择标签
常见的CSS属性选择器类型
- p[name] 匹配具有name属性的p标签
- p[name=abc] 匹配具有name属性，且属性值为abc的p标签。注意属性值区分大小写
- p[name^=abc] 匹配具有name属性，且属性值是以abc开头的p标签
- p[name$=abc] 匹配具有name属性，且属性值是以abc结尾的p标签
- p[name*=abc] 匹配具有name属性，且属性值包含了“abc”的p标签
其中p标签可以换成任意HTML标签，属性和属性值同理
CSS属性选择器就比较简单了，字面意思选择HTML标签的属性
同样这么多类型不一一举例说明了，大同小异看下面示例就能看懂了
代码示例
<style>
li[name] {
color: blue;
}
/* 选择含有name属性的<li>标签 */
/* 并将字体颜色设置为蓝色 */
li[class=a]{
color: red;
}
/* 选择class属性值为a的<li>标签 */
/* 并将字体颜色设置为红色 */
li[id=b] {
color: yellow;
}
/* 选择id属性值为b的<li>标签 */
/* 并将字体颜色设置为黄色 */
li[title*=abc]{
color: green;
}
/* 选择title属性值包含abc的<li>标签 */
/* 并将字体颜色设置为绿色 */
</style>
<ol>
<li name>文本1</li>
<!-- 含有name属性的<li>标签 -->
<li class="a">文本2</li>
<!-- class属性值为a的<li>标签 -->
<li id="b">文本3</li>
<!-- id属性值为b的<li>标签 -->
<li title="abcdefg">文本4</li>
<!-- title属性值包含abc的<li>标签 -->
</ol>预览
暂无评论内容