css 选择器

css选择有十种方式：元素选择器、类选择器、ID选择器、选择器分组、属性选择器、子元素选择器、后代选择器、相邻兄弟元素选择器、伪元素、伪类。

元素选择器。文档的元素就是最基本的选择器。如：html {color:black;}、note{font-family:Verdana, Arial;}(xml)。
选择器分组。结合选择器和声明的分组：h1, h2, h3, h4, h5, h6 {color:gray;background: white;padding: 10px; border: 1px solid black;font-family: Verdana;}；通配符选择器：* {color:red;}
类选择器。允许以一种独立于文档元素的方式来指定样式。如：修改html代码:<h1 class="important">;　语法：.important {color:red;}；结合元素选择器：h1.important {color:blue;};　css多类选择器：.important.warning {background:silver;}，通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
ID选择器。允许以一种独立于文档元素的方式来指定样式。如：<p id="intro"> #intro {font-weight:bold;}。只能在文档中出现一次，不能使用ID词列表，ID能包含更多含义。

属性选择器。可以根据元素的属性及属性值来选择元素。

　　简单属性选择：选择有某个属性的元素，而不论属性值是什么。如：*[title] {color:red;} ; a[href] {color:red;} ;a[href][title] {color:red;}(同时有 href 和 title 属性);

　　　　　　根据具体属性值选择：可以进一步缩小选择范围，只选择有特定属性值的元素。如：a[href="http://www.baidu.com"] {color: red;};

a[href="http://www.baidu.com"][title="W3School"] {color: red;}（同时具备）

　　　　　　属性与属性值必须完全匹配：这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表，匹配就可能出问题。p[class="important warning"] {color: red;}

　　　　　　根据部分属性值选择：如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。如：p[class~="important"] {color: red;}。（部分值属性选择器与点号类名记法的区别在于，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片，img[title~="Figure"] {border: 1px solid gray;}）

　　　　　　子串匹配属性选择器：

类型	描述
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
*[abc="def"]**	选择 abc 属性值中包含子串 "def" 的所有元素

　　　　　特定属性选择类型：会选择 lang 属性等于 en 或以 en- 开头的所有元素。如：*[lang|="en"] {color: red;};

　　　　　　　　　　<p lang="en">Hello!</p>
　　　　　　　　　　<p lang="en-us">Greetings!</p>
　　　　　　　　　　<p lang="en-au">G'day!</p>
　　　　　　　　　　<p lang="fr">Bonjour!</p>
　　　　　　　　　　<p lang="cy-en">Jrooana!</p>

　　　　　总结：

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。

后代选择器（包含选择器）。可以选择作为某元素后代的元素。如：h1 em {color:red;}，div.sidebar a:link {color:white;}。... 在 ... 找到。
子元素选择器。与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。如：h1 > strong {color:red;}，table.company td > p（结合后代选择器和子选择器）。
相邻兄弟元素选择器。选择紧接在另一元素后的元素，且二者有相同父元素。h1 + p {margin-top:50px;}；html > body table + ul {margin-top:20px;}

伪元素。用于向某些选择器添加特殊的效果。伪元素的语法：selector:pseudo-element {property:value;}。只能用于块级元素。

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

伪类。用于向某些选择器添加特殊的效果。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

　　　　如：1.匹配属于 <p> 元素中的第一个子元素的 <em> 元素：p > em:first-child{ font-weight:bold}；2.q:lang(no){ quotes: "~" "~" }　　<p>文字<q lang="no">段落中的引用的文字</q>文字</p>