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;}）
<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] 匹配属性值中包含指定值的每个元素。 - 后代选择器（包含选择器）。可以选择作为某元素后代的元素。如：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>文字<qlang="no">段落中的引用的文字</q>文字</p>
