实例：
复制代码
p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }
四、CSS 2.1中的伪类
| 序号 | 选择器 | 含义 |
| 13. | E:first-child | 匹配父元素的第一个子元素 |
| 14. | E:link | 匹配所有未被点击的链接 |
| 15. | E:visited | 匹配所有已被点击的链接 |
| 16. | E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| 17. | E:hover | 匹配鼠标悬停其上的E元素 |
| 18. | E:focus | 匹配获得当前焦点的E元素 |
| 19. | E:lang(c) | 匹配lang属性等于c的E元素 |
实例：
复制代码
p:first-child { font-style:italic; }
input[type=text]:focus { color:#000; background:#ffe; }
input[type=text]:focus:hover { background:#fff; }
q:lang(sv) { quotes: “201D” “201D” “2019” “2019”; }
五、 CSS 2.1中的伪元素
| 序号 | 选择器 | 含义 |
| 20. | E:first-line | 匹配E元素的第一行 |
| 21. | E:first-letter | 匹配E元素的第一个字母 |
| 22. | E:before | 在E元素之前插入生成的内容 |
| 23. | E:after | 在E元素之后插入生成的内容 |
实例：
复制代码
p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before { content:””; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
a:link:after { content: ” (” attr(href) “) “; }
六、CSS 3的同级元素通用选择器
| 序号 | 选择器 | 含义 |
| 24. | E ~ F | 匹配任何在E元素之后的同级F元素 |
实例：
复制代码
p ~ ul { background:#ff0;}
七、CSS 3 属性选择器
| 序号 | 选择器 | 含义 |
| 25. | E[att^=”val”] | 属性att的值以"val"开头的元素 |
| 26. | E[att$=”val”] | 属性att的值以"val"结尾的元素 |
| 27. | E[att*=”val”] | 属性att的值包含"val"字符串的元素 |
实例：
复制代码
div[id^=”nav”] { background:#ff0;}
