一、通用选择器
对于初学者来说，是应该最先认识的选择器，通用选择器，它的作用是匹配 html 中的所有元素标签。
语法：*{属性：属性值}。
代码如下（示例）：
<style>
*{
margin: 0px;
padding: 0px;
text-align: center;
}
</style>
二、元素选择器
最常见的CSS选择器就是元素选择器。换句话说，文档的元素就是最基本的选择器。选择器通常是某个HTML元素，例如p、img、h1、a等，甚至可以是body或HTML本身。
代码如下（示例）：
<style>
h1{color: greenyellow;}
p{font-size: 40px;}
input{width: 150px;}
a{background-color: hotpink;}
</style>
三、类选择器
只有适当标记文档后，才能使用这些选择器。在使用类选择器之前，需要添加文档标记，以便类选择器正常工作。需使用class关键字，并指定一个适当的属性值（类名），类选择器的开头用.（点）进行表示。
代码如下（示例）：
<style>
.biaoti{background-color: green;}
.lianjie{font-weight: 900;}
</style>
<body>
<h1 class="biaoti">这是一个标题标签</h1>
<p class="duanluo">这是一个段落标签</p>
<a class="lianjie">这是一个超文链接</a>
</body>
类选择器可以结合元素选择器来使用，例如，您可能希望只有段落显示为红色文本。
<style>
p.duanluo{color:red;}
</style>
选择器会匹配 class 属性包含 duanluo的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性，可以理解为 “ 其class属性值为duanluo的所有p标签 ”。
如果需要不同的标签有相同的样式属性，可以把类名选择器连在一起使用，中间使用空格分开，类名无关顺序。
<style>
.duanluo .lianjie{
color:red;
text-align: center;
}
</style>
四、ID选择器
某些方面ID选择器类似于类选择器，不过也有一些重要的差别。ID选择器的开头使用#号。注意属性值不要以数字开头，数字开头的ID名在部分浏览器中不支持。
代码如下（示例）：
<style>
#duanluo {color: greenyellow;}
#lianjiep {font-size: 40px;}
</style>
<body>
<h1 id="biaoti">这是一个标题标签</h1>
<p id="duanluo">这是一个段落标签</p>
<a id="lianjie">这是一个超文链接</a>
</body>
ID选择器与类选择器的区别
1、相同的class属性值，可以在html中出现多次。id属性值在页面中只能出现一次。
2、一个class的属性可以有多个值，也就是说一个标签可以有多个类。
3、ID选择器以#开头，class选择器以 . 开头。
ID选择器与类选择器的相同点
ID选择器和类选择器是区分大小写的，这取决于文档语言，HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。
五、属性选择器
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器
代码如下（示例）：
<style>
[type="text"] {
width: 300px;
}
[title]{
color: blue;
}
</style>
<body>
<input type="text" >
<h2 title="Hello world">Hello world</h2>
</body>
不过属性选择器一般用比较少，个人觉得只要了解知道看得懂就可以了。
六、后代选择器
后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
举例来说，如果您只希望对p元素中的span元素应用样式。
代码如下（示例）：
<style>
p span {color: orange;}
</style>
可以理解为把p元素后代中的所有span元素颜色设置为橙色，而其他的span元素则不会被这个规则选中，中间采用空格分开。
七、子元素选择器
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器，子选择器使用了大于号（子结合符）。
代码如下（示例）：
<style>
h1>strong{
color: orange;
}
</style>
<body>
<h1>今天的<strong>天气是</strong>太阳</h1>
<h1>今天的<em><strong>天气是</strong></em>太阳</h1>
</body>
这个规则会把第一行 h1 下面的 strong 元素变为橙色，但是第二行 h1 中的 strong 不受影响，可以理解为第一行中的strong相当于h1的直接子代，而第二行中的strong相当于是h1的子代的子代。
注意区分后代和子代，两者所表达的意思是不相同的。
八、伪类
伪类用于向某些选择器添加特殊的效果，链接的不同状态都可以以不同的方式显示。
代码如下（示例）：
<style>
a:link { color: #FF0000 }
a:visited { color: #00FF00 }
a:hover { color: #FF00FF }
a:active { color: #0000FF }
</style>
| a:link | 未访问的链接 |
|---|---|
| a:visited | 已访问的链接 |
| a:hover | 鼠标移动到链接上 |
| a:active | 选定的链接 |
特别注意，在 CSS定义中：
a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效，
a:active 必须位于 a:hover 之后，这样才能生效。伪类也可以与CSS类配合使用。
:first-child 伪类的用法
代码如下（示例）：
<style>
/*给第一个p元素添加颜色*/
p:first-child { color: red; }
/*给最后一个li元素字体加粗*/
li:last-child { font-weight: 900; }
/*给第四个li元素设置背景颜色*/
li:nth-child(4){ background-color: green; }
</style>
<body>
<div>
<p>这是第一个段落</p>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
</ul>
<p>这是第二个段落</p>
</div>
</body>
特别注意：必须在 :first-child 前声明需要应用的标签元素，才能看到效果。
总结
今天的内容就分享到这里，对CSS选择器进行了一个简单概括性的论述。各读者们可在留言处查缺补漏，以供需要的朋友能及时解决问题。
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
