五.CSS选择器

1.CSS 元素选择器  name
h1 {color:blue;}
在 W3C 标准中，元素选择器又称为类型选择器（type selector）。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”

2.选择权分组 ( , ; )
(1)选择器分组  (,)
h2, p {color:gray;}
(2)通配符选择器(*)
* {color:red;}
这个声明等价于列出了文档中所有元素的一个分组选择器。
利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。
(3)声明分组(;)
h1 {font: 28px Verdana; color: white; background: black;}
对声明分组，一定要在各个声明的最后使用分号,浏览器会忽略样式表中的空白符。
提示：在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时，就不必担心忘记再插入一个分号。

3.类选择器(.)
(1)类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值
<h1 class="important">
This heading is very important.
</h1>
.important {color:red;}
(2)结合元素选择器
p.important {color:red;}
(3)CSS 多类选择器
通过把两个类选择器链接在一起，仅可以选择"同时"包含这些类名的元素
.important.warning {background:silver;}
class里需要同时存在两个类名(顺序随意)
<p class="important urgent warning">This paragraph is a very important warning.</p>

4.ID选择权(#)
在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。
(1)语法:
首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
引用 id 属性中的值
#intro {font-weight:bold;}
<p id="intro">This is a paragraph of introduction.</p>
(2)类选择器还是 ID 选择器？
区别 1：只能在文档中使用一次
与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
区别 2：不能使用 ID 词列表
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
区别 3：ID 能包含更多含义
(3)区分大小写

5.属性选择器( [] )
(1)简单属性选择
*[title] {color:red;}
a[href] {color:red;}
同时含有多个属性
a[href][title] {color:red;}
(2)根据具体属性值选择
全匹配 a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
请注意，这种格式要求必须与属性值完全匹配。
(3)根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点
p[class~="important"] {color: red;}
(4)子串匹配属性选择器
类型                                  描述
[abc^="def"]    选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]    选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]    选择 abc 属性值中包含子串 "def" 的所有元素
(5)特定属性选择类型
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>

6.后代选择器 (空格)
(1)根据上下文选择元素
h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1>
(2)具体应用
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

7.子元素选择器 ( > )
只选择某个元素的子元素
h1 > strong {color:red;}
<h1>This is <strong>very</strong> important.</h1>

8.相邻兄弟选择器( + )
(1)相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距
h1 + p {margin-top:50px;}
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
(2)结合其他选择器
相邻兄弟结合符还可以结合其他结合符：
html > body table + ul {margin-top:20px;}
解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，
该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

9.CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果。
属性                                  描述                                                                                        CSS
:active         向被激活的元素添加样式。                                        1
:focus          向拥有键盘输入焦点的元素添加样式。                2
:hover          当鼠标悬浮在元素上方时，向元素添加样式。 1
:link           向未被访问的链接添加样式。                                    1
:visited        向已被访问的链接添加样式。                                     1
:first-child    向元素的第一个子元素添加样式。                            2
:lang           向带有指定 lang 属性的元素添加样式。              2
(1)锚伪类
在支持 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 之后，才是有效的。
提示：伪类名称对大小写不敏感。
(2)first-child 第一个子元素
第一个子元素指该元素下所有符合第一个子元素的元素（元素嵌套导致产生多个）
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体，既是第一个子元素又是P元素；
第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
(3)lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。
:lang 类为属性值为 no 的 q 元素定义引号的类型
q:lang(no) { quotes: "~" "~" }
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>

10.伪元素 (Pseudo-elements)
伪元素的语法：
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用：
selector.class:pseudo-element {property:value;}
伪元素
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性                                      描述                                                                  CSS
:first-letter   向文本的第一个字母添加特殊样式。    1
:first-line     向文本的首行添加特殊样式。                   1
:before         在元素之前添加内容。                                   2
:after          在元素之后添加内容。                                   2
(1):first-line 伪元素用于向文本的首行设置特殊样式。
p:first-line { color:#ff0000; font-variant:small-caps; }
(2)"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p:first-letter{color:#ff0000;font-size:xx-large;}
(3)伪元素和 CSS 类
p.article:first-letter {
    color: #FF0000;
}
所有 class 为 article 的段落的首字母变为红色
(4)多重伪元素 可以结合多个伪元素来使用
p:first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p:first-line {
    color: #0000ff;
    font-variant: small-caps;
}
段落的第一个字母将显示为红色，其字体大小为 xx-large;
第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示。
(5)CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
在每个 <h1> 元素前面插入一幅图片：
h1:before {
    content: url(logo.gif);
}
(6)CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
每个 <h1> 元素后面插入一幅图片
h1:after {
    content: url(logo.gif);
}