选择器

简单的属性选择器
*[title] {color:red;}
把包含标题（title）的所有元素变为红色
a[href] {color:red;}
只对有 href 属性的锚（a 元素）应用样式
a[href][title] {color:red;}
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
p[class~="important"] {color: red;}
选择 class 属性中包含 important 的元素
p.important 和 p[class="important"] 应用到 HTML 文档时是等价的
那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class
img[title~="Figure"] {border: 1px solid gray;}
可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：
 子串匹配属性选择器
下表是对这些选择器的简单总结：
类型                                             描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
特定属性选择类型
*[lang|="en"] {color: red;}
这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素
[att|="val"] 可以用于任何属性及其值
假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：
img[src|="figure"] {border: 1px solid gray;}

 :nth-child() 选择器
p:nth-child(2)规定属于其父元素的第二个子元素的每个 p 的背景色
p:nth-child(odd)
p:nth-child(even)
为奇数和偶数 p 元素指定
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
p:nth-child(3n+0) 指定了下标是 3 的倍数的所有 p 元素的背景色