一、属性选择符
如下表所示:
例子如下：
<head> <meta charset="utf-8"> <style type="text/css"> h3[class]{ color: red; } a[class="link"]{ color: burlywood; } a[class~="aa"]{ text-decoration: none; } a[class^="aa"]{ color: yellow; } a[class$="bb"]{ color: blueviolet; } a[class*="cc"]{ color: brown; } a[class|="test"]{ color: darkcyan; } </style> </head> <body> <h3 class="hh">我是标题3</h3> <h3>我是标题3</h3> <h3 class="ss">我是标题3</h3> <h3>我是标题3</h3> <a href="#" class="link">链接一</a> <a href="#" class="link1 aa">链接二</a> <a href="#" class="aalink1">链接三</a> <a href="#" class="linkbb">链接一</a> <a href="#" class="linkcc">链接二</a> <a href="#" class="cclink1">链接三</a> <a href="#" class="test-link">链接四</a> </body>
二、伪对象选择符
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
（1）、E:first-letter/E::first-letter 注：此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
<head> <style type="text/css"> .p1::first-letter { float: left; font-size: 30px; padding: 5px; } </style> </head> <body> <p class="p1">今天天气晴朗，有风。</p> </body>
（2）、E:first-line/E::first-line 注:此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
<head> <style type="text/css"> .p2::first-line
{ color: red; } </style> </head> <body> <p class="p2">设置对象内的第一行的样式。 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。</p> </body>
（3）、E:before/E::before 、E:after/E::after
<head> <style type="text/css"> h2::before{ color: red; content: "谢谢你的访问。"; } h3::after{ color: blue; content: "谢谢你的访问。"; } </style> </head> <body> <h2>我是标题2</h2> <h3>我是标题3</h3> </body>
（4）、E::selection
不同浏览器测试下的写法：
| 内核类型 | 写法(E::selection) |
|---|---|
| Webkit(Chrome/Safari) | E::selection |
| Gecko(Firefox) | E::-moz-selection |
| Presto(Opera) | E::selection |
| Trident(IE) | E::selection |
<head> <style type="text/css"> #pp1::-moz-selection{ color: red; background: #fff; } #pp1::selection{ color: red; background: #fff; } </style> </head> <body> <p id="pp1">请选中这段文字，就会知道selection的作用。</p> </body>
请选中这段文字，就会知道selection的作用。