CSS规则的三种选择符和层叠样式规则

参考文献：《CSS设计指南》第3版

一、三种标签选择符

1.上下文选择符
根据标签的层次结构给指定的标签添加样式。

2.ID选择符
#id名字 {}

3.类选择符
.类名字 {}

4.属性名和属性值选择符
标签名[属性名] {} and 标签名[属性名=属性值]{}

<section>
    <h2>An H2 Heading</h2>
    <p>This is paragraph</p>
    <p>Paragraph 2 has <a href="#">a link</a> in it.</p>
    <a href="#">Link</a>
</section>

多组元素选择符:    h1,h2,h3 {color: red}

祖先子孙元素选择符: section p {font-size: 12px;}

父子元素选择符:    article > p {font-family: helvetica}

紧邻同胞选择符+:   h2 + p {font-variant: small-caps;}

一般同胞选择符~:  h2 ~ a {color: red;}

通用选择符*: section * a {font-size: 1.3em;}（任何时section的
孙子元素，而非子元素会被选中。）
        p * {color: red;}(p包含的所有元素的文本变成红色，边框不变。)

ID选择符:      #idname {color: green;}

类选择符:       .classname {color: blue;}

属性名和属性值选择符: 标签名[属性名] {} and 标签名[属性名=属性值]{}

组合选择符: section p.classname a{} section p.#idname a{} 

二、查理版简单层叠样式规则

规则一：包含ID的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。（特指度高低顺序： I-C-E，特指度计算公式：以I-C-E三位组成三位数，数越大特指度越高。）

规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。

规则一胜过规则二。换句话说，如果选择符更明确（特指度更高），无论它在哪里，都会胜出。

规则三： 设定的样式胜过继承的样式，此时不用考虑特指度（即显示设定优先）。

三、伪类

1.UI(User Interface, 用户界面)伪类
会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。

eg:
a标签的伪类：
    a:link { } 、a:visited { } 、a:hover { } 、a:active { } 。
    声明时要按照此顺序来，否则浏览器解析时会出现问题。
有些伪类还可运用于其他标签
    hover伪类： e:hover { }
    focus伪类： e:focus { }
    target伪类：e:target { }（如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标(target)，可以用:target伪类选中它。）

2.结构化伪类
会在标记中存在某种结构上的关系时（如某个元素时一组元素中的第一个或最后一个），为相应元素应用CSS样式。

eg:
    1. e:first-child 和 e:last-child
    2. e:nth-child(n) (如 li:nth-child(3)选中一组列表项中的每个第三项。)

四、伪元素
顾名思义，伪元素就是你的文档中若有实无的元素。

1.e::first-letter伪元素
    指定标签中第一个字母的伪元素。
2.e::first-line伪元素
    可以选中文本段落（一般情况下时段落的第一行）
3.e::before and e::after
    可用于在特定元素前面或后面添加特殊内容。

五、链接标签指向当前页面中其他标签的用法。

1.<a href="#">link</a>
    点击此链接，会返回页面的顶部。
2.<a href="#idname">link</a>
    点击此链接，将页面指向此id标签所在位置。