本文全部基于HTML进行讲解，没有考虑XML，XHTML的情况，请知悉。
一、元素选择器
通配选择器
语法：
* { sRules }
说明：
选定文档所有的元素
示例：
* { color: red; }
<div>我是div</div>
元素选择器
语法：
E { sRules }
说明：
选定指定的文档元素E
示例：
p {
color: red; }
<p>我是p</p>
二、类选择器和ID选择器
类选择器
语法：
E.myclass { sRules }
说明：
选定class属性包含myclass的文档元素E
示例：
.myClass { color: red }
<div class="myclass">我是div</div>
多类选择器
语法：
E.myclass.myotherclass { sRules }
说明：
选定class属性包含myclass以及myotherclass的文档元素E
示例：
.myClass.myotherclass { color: red }
<div class="myclass myotherclass">我是div</div>
ID选择器
语法：
E#myid { sRules }
说明：
选定id属性值为myid的文档元素E
示例：
#myid { color: red; }
<div id="myid">我是div</div>
三、属性选择器
根据简单属性选择
语法：
E[attr] { sRules }
说明：
选定具有属性attr的文档元素E
示例：
div[id] { color: red; }
<div id="myid">我是div</div>
根据具体属性值选择
语法：
E[attr="val"] { sRules }
说明：
选定具有属性attr且属性值等于val的文档元素E
示例：
div[id="myid"] { color: red; }
/* 多个属性-值 */ input[type="text"][class="text1"] { width: 20px; }
<div id="myid">我是div</div> <input type="text" class="text1" />
根据部分属性值选择
语法：
E[attr~="val"] { sRules }
说明：
选定具有属性attr且属性值为一用空格分隔的字词列表，其中一个等于val（包含只有一个值且该值等于val的情况）的文档元素E
示例：
div[class~="div1"] { color: red; }
<div calss="div1">我是div</div> <div class="div1 header">我是div</div>
语法：
E[attr^="val"] { sRules }
说明：
选定具有属性attr且属性值以val开头的字符串的文档元素E
示例：
div[class^="head"] { color: red; }
<div calss="headClass">我是div</div>
语法：
E[attr$="val"] { sRules }
说明：
选定具有属性attr且属性值以val结尾的字符串的文档元素E
示例：
div[class$="Class"] { color: red; }
<div calss="headClass">我是div</div>
语法：
E[attr*="val"] { sRules }
说明：
选定具有属性attr且属性值包含val的字符串的文档元素E
示例：
div[class*="Div"] { color: red; }
<div calss="headDivClass">我是div</div>
语法：
E[attr|="val"] { sRules }
说明：
选定具有属性attr且属性值以val开头并用连接符"-"分隔的字符串（包含属性值只有val的情况）的文档元素E
示例：
div[class|="head"] { color: red; }
<div calss="head-class">我是div</div>
四、关系选择器
后代选择器
语法：
E F { sRules }
说明：
选定文档元素E所有的后代元素F，包含所有子孙
示例：
/* 选中后代所有的p */
div p { color: red; }
<div> <p>我是段落1</p> <div> <p>我是段落2</p> </div> </div>
子代选择器
语法：
E>F { sRules }
说明：
选定文档元素E所有的子代元素F，不包含孙代元素
示例：
/* 选中子代的p，但选中不了孙代的p */
div>p { color: red; }
<div> <p>我是段落1</p> <div> <p>我是段落2</p> </div> </div>
相邻选择器
语法：
E+F { sRules }
说明：
选定文档元素E之后且同属一个父元素的相邻兄弟元素F
示例：
/* 只能选中h1相邻的p */ h1>p { color: red; }
<div> <h1>我是h1</h1> <p>我是段落1</p> <p>我是段落2</p> </div>
兄弟选择器
语法：
E~F { sRules }
说明：
选定文档元素E之后且同属一个父元素的兄弟元素F
示例：
/* 选中h1之后所有的p */ h1>p { color: red; }
<div> <h1>我是h1</h1> <p>我是段落1</p> <p>我是段落2</p> </div>
四、伪类和伪元素选择器
伪类选择器
语法：
a:link { sRules }
说明：
设置超链接a未被访问前的样式
示例：
a:link { color: blue; }
<a href="http://i.cnblogs.com"></a>
语法：
a:visited { sRules }
说明：
设置超链接a已经被访问后的样式
示例：
a:link { color: red; }
<a href="http://i.cnblogs.com"></a>
语法：
E:focus { sRules }
说明：
设置元素E在成为输入焦点（该元素的onfocus事件发生）时的样式
示例：
a:focus { color: black; }
<a href="http://i.cnblogs.com"></a>
语法：
E:hover { sRules }
说明：
设置元素E在鼠标悬停时的样式
示例：
a:hover { color: red; }
<a href="http://i.cnblogs.com"></a>
语法：
E:active { sRules }
说明：
设置元素E在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
示例：
a:active{ color: green; }
<a href="http://i.cnblogs.com"></a>
以上五种伪类选择器同时用在a超链接时，各伪类需按特定的顺序书写才能生效，保证各浏览器具有相同的表现。正确的顺序为：link - visited - focus - hover - active
语法：
E:lang(lang) { sRules }
说明：
选定使用特殊语言的元素E
示例：
p:lang(zh-cn) { color: #f00; } p:lang(en) { color: #090; }
<p lang="zh-cn">我是中文</p> <p lang="en">i am English</p>
更多关于CSS选择器可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors