1.ID 选择器（ID selector，IS）：使用 # 标识selector，语法格式：#S{...}（S为选择器名）。例：id为name的标签会匹配下面的样式
<style>
#name{
color:red; } </style> <!--下面文字是红色的--> <p id="name">red text</p>
2.类选择器（class selector，CS）：使用 . 标识selector，语法格式：.S{...}（S为选择器名）。例：class属性值为value的标签会匹配下面的样式
<style>
.value{ text-align:center; } </style> <!--下面的文字是居中对齐的--> <p class="value">center text</p>
3.元素选择器（element selector，ES）：又叫标签选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。例：所有的p标签都会匹配以下的样式
<style>
p{
font-style:italic; } </style> <!--下面的文字是斜体的--> <p style="font-style:italic">italic text</p>
4.属性选择器（attribute selector，AS）：ES其实是AS的一个特例，在AS基础上还能对selector描述得更具体，语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{...}，是并没有得到所有浏览器支持的选择器，因此不举例
5.包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式
<style>
p{
color:red; } div p{ color:yellow; } </style> <p>red text</p><!--文字是红色的--> <div> <p>yellow text</p><!--文字是黄色的--> </div>
6.子选择器（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>
7.兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）
<style>
div~p{ color:red; } </style> <div> <p>no red text</p><!--文字是非红色的--> <div>no red text</div> <p>red text</p><!--文字是红色的--> </div>
1. 补充包含选择器：
包含选择器除了有 A B{...} 的形式外（A和B都是标签），还可以有这种形式：.A B{...} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 名为 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>
2. 补充子选择器
子选择器除了有 A >B{...} 的形式外（A和B都是标签），还可以有这种形式：.A >B{...} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 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>
3.通用选择器
语法形式为：*{属性：属性值}。它的作用是匹配 html 中的所有元素标签。
<!--使用html中任意标签元素字体颜色全部设置为红色：--> <style> *{color:red;} </style> <body> <h1>标题为红色</h1> <p>段落也为红色</p> </body>
相邻选择器。
语法形式为：
A+B{
声明1; 声明; ... }
实例:
<!--相邻选择器选择每个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>