CSS 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
*[title] {color:red;}
包含标题（title）的所有元素变为红色
a[href] {color:red;}
只对有 href 属性的锚（a 元素）应用样式
a[href][title] {color:red;}
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
img[alt] {border: 5px solid red;}
对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像
根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
希望将指向 Web 服务器上某个指定文档的超链接变成红色
与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
效果如下：只有同时满足多个属性-值才会应用样式
<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
<a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
<a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>
属性与属性值必须完全匹配
请注意，这种格式要求必须与属性值完全匹配。
如果属性值包含用空格分隔的值列表，匹配就可能出问题。
p[class="important warning"]不等于p[class="important"]
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~="important"] {color: red;}
如果忽略了波浪号，则说明需要完成完全值匹配。
p.important 和 p[class=“important”] 应用到 HTML 文档时是等价的。 那么，为什么还要有 “~=”
属性选择器呢？因为它能用于任何属性，而不只是 class。
子串匹配属性选择器
特定属性选择类型
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和
figure-2.jpg。就可以使用以下选择器匹配所有这些图像：
html img[src|="figure"] {border: 1px solid gray;}
CSS 伪类
CSS 伪类用于向某些选择器添加特殊的效果。
锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
CSS2 - :first-child 伪类
:first-child 伪类来选择元素的第一个子元素。
p:first-child i {color:blue;}
CSS2 - :lang 伪类
向带有指定 lang 属性的元素添加样式。
<html>
<head><style type="text/css"> q:lang(no){
quotes: "~" "~"} </style></head><body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>
CSS :focus 伪类
规定获得焦点的输入字段的颜色：
input:focus{color:yellow;}
这个伪类应用于有焦点的元素。例如 HTML中一个有文本输入焦点的输入框，其中出现了文本输入光标；也就是说，在用户开始键入时，文本会输入到这个输入框。其他元素（如超链接）也可以有焦点，不过CSS 没有定义哪些元素可以有焦点。
CSS 伪元素
CSS 伪元素用于向某些选择器设置特殊效果。
:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式。
注释：“first-line” 伪元素只能用于块级元素。
注释：下面的属性可应用于 “first-line” 伪元素：
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式：
注释：“first-letter” 伪元素只能用于块级元素。
注释：下面的属性可应用于 “first-letter” 伪元素：
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear
多重伪元素
可以结合多个伪元素来使用。
p:first-letter { color:#ff0000; font-size:xx-large; }
p:first-line { color:#0000ff; font-variant:small-caps; }
段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示
CSS2 - :before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
在每个 < h1 > 元素前面插入一幅图片
h1:before{content:url(logo.gif);}
CSS2 - :after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 < h1 > 元素后面插入一幅图片：
h1:after{content:url(logo.gif);}