本文最后更新于 328 天前，其中的信息可能已经有所发展或是发生改变。
标签选择器（Element Selector，ES）
也叫元素选择器，这应该是使用最多的一个选择器了，用来选中指定的HTML标签。
用法：S{...}
<style>
h3{
color:red;
}
</style>
<h3>Ti</h3>当然，要想让多个标签有同样效果可以用,隔开
<style>
h3,p,h1{
color:red;
}
</style>
<h3>Ti</h3>
<p>Red</p>
<h1>RED</h1>ID选择器（ID Selector，IS）
通过标签的id属性来选择。
用法：#S{...}
<style>
#name{
color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">Ti</p>
class选择器（Class Selector，CS）
通过标签的class属性来选择。
用法：.S{...}
<style>
.value{
text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">文字居中对齐</p>属性选择器（Attribute Selector，AS）
事实上ES其实是AS的一个特例，使用AS能对选择器描述得更具体。
语法格式为：E[attr[~=][|=][^=][$=][*=]VALUE]{...} 。
不过属性选择器并没有得到所有浏览器支持。
<style>
p[id="name"]{
color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">Ti</p>包含选择器（Package Selector，PS）
指定目标选择器必须处在某个选择器对应的元素内部。
语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）
<style>
p{
color:red;
}
div p{
color:yellow;
}
</style>
<p>字是红色的</p><!--文字是红色的-->
<div>
<p>字是黄色的</p><!--文字是黄色的-->
</div>还可以有这种形式：.A B{...}的形式（A是类名，B是标签）。
<style>
.first span{
color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
<li><span>内容也是红色</span></li>
<li><span>内容也是红色</span></li>
</ol></p>
</body>子选择器（Sub-Selector，SS）
类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许”子标签”甚至”孙子标签”及嵌套更深的标签匹配相应的样式，而SS只能选择作为某元素儿子元素的元素，不包括孙元素、曾孙元素等等等。
语法格式：A>B{...}（A、B为HTML元素/标签）。
例：以下div内的p标签匹配样式，div内的table内的p不匹配
<style>
div>p{
color:red;
}
</style>
<div>
<p>red text</p><!--文字是红色的-->
<table>
<tr>
<td>
<p>no red text;</p><!--文字不是红色的-->
</td>
</tr>
</table>
</div>还可以有这种形式：.A >B{...} 的形式（A是类名，B是标签）。
<style>
.first>span{
color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
<li><span>内容不是红色</span></li>
<li><span>内容不是红色</span></li>
</ol></p>
</body>兄弟选择器（Brother Selector，BS）
BS是CSS3.0新增的一个选择器。
语法格式：A~B{...}（A、B为HTML元素/标签，表示A元素的后面的所有标签为B的兄弟结点）
<style>
div~p{
color:red;
}
</style>
<div>
<p>非红色</p><!--文字不是红色的-->
<div>非红色</div>
<p>红色</p><!--文字是红色的-->
</div>通用选择器
它的作用是匹配 html 中的所有元素标签。
语法形式为：*{属性：属性值}。
<!--使用html中任意标签元素字体颜色全部设置为红色：-->
<style>
*{color:red;}
</style>
<body>
<h1>标题为红色</h1>
<p>段落也为红色</p>
</body>相邻选择器
语法形式为：A+B{...}
<!--相邻选择器选择每个div紧邻后的一个元素p-->
<style>
div+p{
color: red;
}
</style>
<div>
<p>not red text</p>
<p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>伪类选择器
语法形式为：A:B{...}
主要根据用户动作，标签位置，标签状态来选中
伪元素选择器
语法形式为：A::B{...}
主要选中一段文本的一行，首字，或前后添加样式
CSS选择器优先级规则
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器