《css权威指南》学习笔记二
第二章 选择器
一、基本规则
1、规则结构
一个css样式文档由若干个规则组成，下面是一条简单的规则：
h1 {color: red; background: yellow;}
每个规则包括两部分：选择器和声明块。在示例中，h1就是选择器，{color: red; background: yellow}部分则是声明块。
声明块由一个或多个声明组成。
每个声明是一个属性-值对，示例中，color就是一个属性，它的值是red。
2、元素选择器
可以使用一个html元素作为选择器：
p {
color: red;
}
3、声明的值
声明的值要么是一个关键字，要么是该属性可取的关键字的一个列表，关键字之间用空格分隔。
/* 设置p元素的边框是细边框，实线，红色 */
p {border: thin solid red}
二、分组
1、选择器分组
在规则的声明部分可以使用一组选择器，选择器之间用英文逗号隔开，这些选择器共用一个声明块。
h2, p {color: gray}
示例代码的作用是同时设置h2元素和p元素的颜色为灰色。
通配符选择器
css中*称为通配符选择器，它可以匹配所有元素。
2、声明分组
在一条规则中可以设置一组选择器，当然也可以设置一组声明，声明之间使用;隔开。
三、类选择器和ID选择器
1、类选择器
类选择器通过html元素的class属性来匹配元素：
<html>
<head>
<style>
/* 设置class为warning的元素字体为粗字体。 */
p.warning {
font-weight: bold;
}
</style>
</head>
<body>
<p class="warning">This is a warning message!</p>
</body>
</html>
类名前加一个点号.，可以组成一个类选择器，类选择器可以单独使用，也可以像示例代码中一样，结合元素选择器来使用。
2、多类选择器
class属性的值除了一个词的情况外，还可能是一个词列表，各个词之间用空格分隔。
<html>
<head>
<style>
/* 设置class值包含warning和danger的元素的字体为粗字体。 */
p.warning.danger {
font-weight: bold;
}
</style>
</head>
<body>
<p class="warning danger">This is a warning danger message!</p>
<p class="danger">This is a danger message!</p>
</body>
</html>
多个类选择器结合使用时，没有先后顺序。
3、ID选择器。
ID选择器通过html元素的id属性匹配元素：
<html>
<head>
<style>
/* 设置id值user-id的元素为红色。 */
#user-id {
color: red;
}
</style>
</head>
<body>
<p id="user-id">Admin</p>
</body>
</html>
不同于class属性，id属性只能有一个词，不能为列表的形式。且同一个html文档中id值应该是唯一的，只后相同的id会被忽略。
四、属性选择器
1、简单属性选择
如果只是希望选择有某个属性的元素，而不论该属性的值是什么，可以使用简单属性选择器。
简单属性选择器的形式为[属性名]，示例如下：
/* 设置所有带有class属性的p元素的颜色为红色 */
p[class] {color :red;}
2、根据具体属性值选择
还可以选择特定属性值的元素：
/* 设置所有href值为http://www.baidu.com的a元素为粗字体 */
a[href="http://www.baidu.com"] {font-weight: bold;}
3、根据部分属性值选择
如果属性支持词列表作为值，那么可以根据部分属性值来选择。
/* 设置所有class属性包括danger的p元素为红色 */
p[class~="danger"] {color: red;}
除了~=之外，还有以下部分属性选择器：
[foo^="bar"]，表示选择foo属性值以var开头的元素。
[foo$="bar"]，表示选择foo属性值以bar结尾的元素。
[foo*="bar"]，表示选择foo属性值包括bar子串的元素。
4、特定属性选择器
例：
[lang|="en"]，表示选则lang属性以en或en-开头的元素。
特定属性选择器和上一小节的部分属性选择器都不常用，但在特定的情况下确实很方便。
五、使用文档结构
1、后代选择器
可以选择某些元素的后代元素来设定样式：
/* 设置h1元素的后代中的div元素的颜色为红色。 */
h1 div {
color: red;
}
2、子元素选择器
也可以选择某些元素的子元素设定样式：
/* 设置h1元素的子元素中的a标签的颜色为红色。 */
h1 a {
color: red;
}
3、选择相邻兄弟元素
要选择紧接在一个元素后的元素，而且二者有相同的父元素：
/* 去除紧接在一个h1元素后出现的段落的上边距。 */
h1 + p {
margin-top: 0;
}
两个元素之间的文本内容不会影响相邻兄弟元素起作用。
六、伪类和伪元素
1、伪类选择器
在html中，a标签表示超链接，但是超链接又分为两种类型，已经访问过的超链接和没有访问过的超链接。超链接的这两种类型是真实存在的，但是从html元素中无法区分，这种表示元素状态的类型成为伪类。
（1）超链接伪类
| 伪类名 | 描述 |
|---|---|
| :link | 表示没有访问过的超链接。 |
| :visited | 表示已经访问过的超链接 |
表中的第一个伪类:link看起来有些多余，看起来:visited就可区分两张超链接的样式：
a {color: blue;}
a:visited {color: red;}
上边的代码看起来很完美，设置所有的超链接为蓝色，访问过的超链接为红色。但其实上边的样式会忽略这样的a标签<a name="section4">4、第四章节</a>，也就是说:link伪类不会选择没有href属性的a标签。
（2）动态伪类
css2.1定义了3个动态伪类，它们可以根据用户的行为来选择元素：
| 伪类名 | 描述 |
|---|---|
| :focus | 指示当前焦点所在的元素。 |
| :hover | 指示鼠标指针悬停在哪个元素上。 |
| :active | 指示被用户激活的元素。 |
很多web页面都经常使用类似以下的样式：
a:link {color: navy;}
a:visited {color: gray;}
a:focus {color: blue;}
a:hover {color: red;}
a:active {color: yellow}
（3）选择第一个子元素
还可以使用另一个静态伪类：:first-child。它用来选择自身是第一个子元素的元素。
<html>
<head>
<style>
/* 以下样式会应用到div的第一子元素p，不会应用到p的第一个子元素span。 */
p:first-child {
color: red;
}
</style>
</head>
<body>
<div>
<p>I am p:first-child<span>I am span:first-child</span></p>
</div>
</body>
</html>
2、伪元素选择器
学完了可以表示元素状态的伪类后，再来看看可以在文档中添加假想元素的伪元素。
（1）设置首字母样式
:first-letter用于设置一个块级元素首字母的样式。
/* 设置每个段落第一个字母的大小是其余字母的两倍。 */
p:first-letter {font-size: 200%;}
（2）设置第一行的样式
/* 设置每个段落第一行的颜色是紫色。 */
p:first-line {color: purple;}
所有伪元素都必须放在选择器的最后面，因为伪元素必须作用于选择器选中的元素。
（3）在元素之前或之后添加元素
css2.1允许插入生成内容，然后使用伪元素:before和:after设置内容和样式。
/* 在每个h2元素前加一对银色中括号。 */
h2:before {content: "]]"; color: silver;}
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
