-
通用选择符，用"*"号表示，可用于所有标记。如：
<style>
* {font-size: 14pt;}
*.EM {color: red;}
</style>
<div>应用字体样式</div>
<em class="EM">应用红色样式</em>
-
类型选择符，与标记名一样，只作用已该标记上。如：
<style>
div {font-size: 14pt;}
</style>
<div>应用样式</div>
-
子代选择符，HTML标记是可嵌套的，子代选择符可把样式表应用于子嵌套的子标记上，如：
<style>
div p b {font-size: 14pt;}
</style>
<div>
<p>没有应用样式</p>
<p><b>应用样式</b></p>
</div>
-
子选择符，与子代选择符类似，但它只调用第一层子元素。如：
<style>
div > b {color: red;}
div p > em {color: green;}
</style>
<div><b>当b标记是div标记的子标记时应用红色样式</b></div>
<div><p><em>当em是p的子标记且p是div的子标记时应用绿色样式</em></p></div>
-
邻近选择符，当两个元素位于同一层且在位置是前后关系时，可以使用邻近选择符。两个选择符用"+"号分开，如果A位于B之前，则B可应用样式。如：
<style>
div + p {color: red;}
</style>
<div>没有应用样式</div>
<p>应用红色样式。</p>
-
属性选择符，HTML标记有属性，我们可为特定的属性指定样式。有四种写法，分别是：
-
[属性]，样式只应用于指定的属性。
-
[属性=值]，样式只应用于指定的属性与值都相同的情况
-
[属性~=值]，样式只应用于指定的属性且属性值包含指定值的情况，属性值是用空格分隔的字符串。
-
[属性|=值]，样式只应用于指定的属性且属性值是的第一个字符串是指定值的情况，属性值是用"-"分隔的字符串。
<style>
[href] {color: red;}
A[href="http://www.ringkee.com"] {color: green;}
table[summary~="table"] {color: black;}
table[summary|="this-is-a-table"] {color: blue;}
</style>
<a href="http://www.python.org">应用红色样式</a>
<a href="http://www.ringkee.com">应用绿色样式</a>
<table summary~="This is a table>
<tr>
<td>应用黑色样式</td>
</tr>
</table>
<table summary|="This-is-a-table>
<tr>
<td>应用蓝色样式</td>
</tr>
</table>
-
类选择符，与属性选择符类似，但它只指对class属性应用样式。类选择符用"."语法，如.value与[class~=value]是一样的。
<style>
.myid {color: red;}
</style>
<div class="myid">应用红色样式</div>
-
ID选择符，与属性选择符类似，但它只指对ID属性，用"#"语法。
<style>
#myid {color: red;}
</style>
<div id="myid">应用红色样式</div>
-
:first-child伪类，当标记是另一个标记的第一个子标记时，应用样式。
<style>
p:first-child {color: red;}
</style>
<p>p是body的第一个子标记，应用红色样式</p>
<div>测试</div>
<p>p标记是body的第三个子标记，不应用红色样式</p>
-
:link和:visited伪类只作用于a标记，在指定href属性的前提下，:link表示a标记还没被点击时的样式，:visited表示被当点后的样式。
<style>
a:link {color: blue;}
a:visited {color: red;}
</style>
<a href="http://www.ringkee.com">链接没点击前是蓝色的，点击后是红色的</a>
-
:hover，:active和:fouce伪类也只能作用于a标记，且也要指定href属性。:hover指定当用户把鼠标移到a标记上并且指针变成手型时应用的样式。:active指定点击a链接并放开鼠标时所显示的样式。:fouce指定用户点击a标记瞬间，即链接成为焦点时所显示的样式。:hover要放在:link和:visited之后，否则:hover的样式会覆盖:link和:visited的样式。
<style>
a:link {color: blue;}
a:visited {color: red;}
a:haover {color: green;}
a:focus {color: black;}
a:active {color: white;}
</style>
<a href="http://www.ringkee.com">应用样式</a>
-
:left及:right伪类只作用于页面内容。当页面在左边时应用:left指定的样式，当页面在右边时应用:right指定的样式。
-
:first-line只对div和p标记不效，样式只应用于这两个标记内的第一行内容。
<style>
:first-line {color: red;}
</style>
<div width:50px;>
该元素内的第一行内容应用红色样式。
</div>
-
:first-letter伪类也只能作用于div和p标记，与:first-line不同的是它只作用于标记内的第一个字符。如果我们想要每一行的开头字符大一点就可使用该伪类。
<style>
:first-letter {font-size: 40pt;}
</style>
<p>这行文字开头第一个字符的大小是40pt</p>
-
:before和:after伪类可在内容的前面或后面增加特定的内容或指定样式。
<style>
p:before {content: "("; color: red;}
p:after {content: ")"; color: green;}
</style>
<p>这行文字前后会增加一对括号，前括号为红色</p>
<p>这行文字前后会增加一对括号，后括号为绿色</p>
-
层叠选择符是指当有多个选择符的样式都应用于同一个标记时的选择规则。该规则利用一个三位数来确定，数字最大的就可选中。这三位数的确定规则的这样的，如果选择符中有ID选择符，则百位数加1,否则为0。如果有属性选择符、类选择符或伪类选择符，则十位数加1，否则为0。如果有类型选择符，则个位数加1，否则为0。如果选择符是#div div，这三位数则是101。让我们分析一下，#div是ID选择符，所以在百位数上加1，div是类型选择符，所以个位数上加1变成101。"*"表示0，优先级最低。
