第九章 定义选择器

选择器决定将格式化应用到哪些元素，声明定义要应用的格式化

一、构造选择器（5个标准）

1、元素的类型或名称

可以在一个选择器中使用一组元素的名称、类、伪元素，名称之间用逗号分隔。

h1，
h2 {
    color: red;
}/* 样式应用h1元素 */

2、元素所在的上下文

（1）、按祖先元素选择要格式化的元素（.architect p、article p、article.architect p）

h1 em {
    color: red;
} /* 样式应用于h1元素中的em元素 */

（2）、按父元素选择要格式化的元素

.architect > p{
    color: red;
}

（3）、按相邻同胞元素选择要格式化的元素(+相邻同胞结合符)

.architect p+p{
    color:red;
}

（4）、按同胞元素选择要格式化的元素（~普通同胞结合符）

.architect p~p{
    color:red;
}

3、元素的类或ID（要定义的元素有多个类名，直接连在一起.architect.bio）

.error {
     color: red;
}/* 选择所有属于error类的元素 */

#gaudi{
    color: red;
}/*选择ID为gandi的元素*/

4、元素的伪类或伪元素

strong.error{
    color:red;
}/* 选择属于error类的strong元素 */

a:link{
    color: red;
}/* 选择器属于link伪类的a元素 */

5、元素是否有某些属性和值（在选择器中使用方括号添加关于目标元素的属性或值的信息）

a[title]{
    color: red；
}/* 所有具有title属性的a元素 */

[title]  匹配指定属性，不论具体值是什么
[title="value"]  完全匹配指定属性值
[title~="value"]   属性值是以空分隔的多个单词，其中有一个完全匹配指定值
[title|="value"]     属性值以value-开头
[title^="value"]    属性值以value开头，value为完整单词或单词的一部分
[title$="value"]    属性值以value结尾，value为完整单词或单词的一部分
[title*="value"]     属性值包含指定值的子字符串

a[hreff="http://www.wikipedia.org"]{
    color: red;  
}/* 针对指向维基百科页面的a元素 */

6、其他

（1）、选择第一个或最后一个子元素(:first-child、:last-child)

li:first-child{
    color: red;
}

（2）、选择元素的第一个字母或者第一行（:first-letter、first-line）

（3）、按状态选择l链接元素(链接可能同时处于多种状态，且晚出现的规则会覆盖前面出现的规则，所以一定要按顺序定义规则link→visited→focus→hover→active)

a:link {
    color: red;
}/* `link`从未被激活或指向，当前也没有被激活或指向的链接的外观*/

a:visited {
    color:  orange;
}/*`visited`访问者已激活过的连接的外观*/

a:focus {
    color: purple;
}/* `focus` 连接是通过键盘选择并已准备好激活的 */

a:hover {
    color: green;
}/* `hover`光标指向链接时链接的外观 */

a:active {
    color: blue;
}/* `active`激活时的链接的外观 */

• 链接的所有状态显示为同一种样式

a {
    color: red;
}/* 链接的所有状态显示为同一种样式 */

• 可对其他元素使用:active、、:hover

p:hover {
    color: red;
}/* 鼠标停留在任何段落上段落都会显示为红色*/

注意

（1）、通配符`*`匹配代码中的任何元素名称。
（2）、`祖先`包含目标（后代）元素的任何元素；`父元素`直接包含另一个元素的元素，它们之间只隔一代；`同胞元素`拥有同一个父元素的任何类型的子元素；`相邻同胞元素`直接相互毗邻的元素，即他们之间没有其他的同胞元素。
（3）、伪元素：在HTML中并不存在的元素，是元素的部分内容`eg:定义第一个字母或第一行文字时`；伪类：应用于一组HTML元素，无需在HTML中用类标记`eg:使用first-child可以选择某元素的第一个子元素，不用写成class=“first-child”`