类型选择符,与标记名一样,只作用已该标记上。如:
<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>










