css 选择器

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

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

   简单属性选择：选择有某个属性的元素，而不论属性值是什么。如：*[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;}）

   　　　　　　　　<img title="Figure 1" src="/i/figure-1.gif" />
   　　　　　　　　　 <img title="Figure 2" src="/i/figure-2.gif" />

   　　　　　　子串匹配属性选择器：

   类型	描述
   [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]	匹配属性值中包含指定值的每个元素。

1. 后代选择器。
2. 子元素选择器。
3. 相邻兄弟元素选择器。
4. 伪元素。
5. 伪类。