WEB基础之：CSS选择器
CSS选择器
1. 规则结构
有两个基本部分：选择器(selector)和声明块(declaration block)。
1. 选择器用于指定CSS样式作用的HTML对象，声明块(花括号)内是对该对象设置的具体样式。
2. 声明块由一个或多个声明组成，每个声明是一个属性: 值对(property-value)。
3. 属性和值之间用“:”连接。
4. 多个“键值对”之间用“;”进行区分。
2. 元素选择器
CSS还可以包含XML文档的样式。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color: black;}
h1 {color: grey;}
3. 选择器分组
3.1 多选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color: gray;}
/*可以将任意多个选择器分组在一起：*/
body, table, th, td, h1, h2, p, pre, strong, em {color: gray;}
3.2 通配选择器
通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
* {color: red;}
3.3 声明分组
h1 {font: 18px Helsinki; color: purple; background: aqua;}
3.4 结合选择器和声明的分组
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 0.5em;
border: 1px solid black;
font-family: "Microsoft YaHei", sans-serif;
}
4. 类选择器
4.1 类选择器
实现不考虑文档具体涉及的元素来应用样式。
使用类选择器之前，需要修改具体的文档标记。为了将一个类选择器的样式与元素关联，必须将class属性指定为一个适当的值，
<h1 class="warning">h1元素，类选择器的样式与元素"warning"关联</h1>
<p class="warning">p元素，类选择器的样式与元素"warning"关联</p>
<p>p元素，没有关联类选择器的样式</p>
向该类中应用样式的方法，即类名前有一个点号"."
*.warning {font-style: italic;}
/*类选择器中可以忽略通配符选择器。*/
.warning {font-style: italic;}
/*只匹配class属性包含warning的所有p元素*/
p.warning {color: grey;}
4.2 多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为urgent和warning，就可以写作：
<p class="urgent warning">p元素，多类选择器的样式与元素"urgent warning"关联</p>
class中词的顺序任意。
.warning {font-style: italic;}
.urgent {font-weight: bold;}
/*通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。*/
.warning.urgent {background: darkred;}
5. ID选择器
5.1 ID 选择器
类似于类选择器。不同的是，ID 选择器前面有一个 # 号 ，也称为棋盘号或井号。
*#first-para {font-weight: bold;}
/*与类选择器一样ID选择器中可以忽略通配符选择器。*/
#first-para {font-weight: bold;}
5.2 类选择器还是 ID 选择器？
- 与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
- 不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
- ID 能包含更多含义
类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一次。
#mostImportant {color:red; background:yellow;}
上面的规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>
5.3 区分大小写
请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。
6. 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
6.1 简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。如：根据元素属性来选择元素
<h1 class="hoopla">hello</h1>
<h1 class="severe">Serenity</h1>
<h1 class="fancy">fooling</h1>
h1[class] {color: silver;}
/*将包含title属性的所有元素变为粗体显示*/
*[class] {font-weight: bold;}
/*将同时有href和title属性的HTML超链接的文本置为粗体显示*/
a[href][title] {font-weight: bold;}
6.2 根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
a[href="http://www.css-discuss.org/about.html"] {font-weight: bold;}
a[href="http://www.css-discuss.org/about.html"][title="W3C Home"] {font-weight: bold;}
注意，这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表，匹配就可能出问题。
<planet type="barren rocky">Mercury</planet>
要根据具体属性值匹配这个元素，唯一的写法：
planet[type="barren rocky"] {font-weight: bold;}
6.3 根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。如果忽略了波浪号，则说明需要完成完全值匹配。
p[class~="urgent"] {color: red;}
/*那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。*/
img[title~="Figure"] {border: 1px solid gray;}
- 子串匹配属性选择器
| 类型 | 描述 |
|---|---|
| [foo^=“bar”] | 选择 foo 属性值以 “bar” 开头的所有元素 |
| [foo$=“bar”] | 选择 foo 属性值以 “bar” 结尾的所有元素 |
| [foo*=“bar”] | 选择 foo 属性值中包含子串 “bar” 的所有元素 |
6.4 特定属性选择类型
*[lang|="en"] {color: white;}
这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<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>
一般来说，[att|=“val”] 可以用于任何属性及其值。
假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：
img[src|="figure"] {border: 1px solid gray;}
7. 后代选择器
后代选择器（descendant selector）又称为包含选择器或上下文选择器（contextual selector）。
7.1 根据上下文选择元素
定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。如只对 h1 元素中包含的 em 元素匹配：
h1 em {color:gray;}
h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。
7.2 语法解释
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 中找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。
两个元素之间的层次间隔可以是无限的。
8. 子元素选择器
应用于不想选择一个任意的后代元素，而是希望缩小范围，只选择某个特定元素的子元素而不是后代元素。
<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
/*只会将第一个h1下面出现的strong元素变成红色。*/
h1 > strong {color: red;}
9. 选择相邻兄弟元素
选择紧接在另一个元素后的元素，而且二者有相同的父元素。可以使用相邻兄弟结合符（Adjacent sibling combinator）表示为一个加号（+）。
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
/*把ul与ol列表中的第二个和第三个列表项变为灰色*/
li + li {color: grey;}
/*把ul列表中的第二个和第三个列表项变为灰色*/
ul > li + li {color: grey;}
10. 伪类选择器
10.1 伪类
伪类(Pseudo-classes)：同一个标签，根据其不同的种状态，有不同的样式。如锚元素(a)，如果只看HTML标记无法区别有些锚是否已经访问过或尚未访问，唯一办法是将文档中的链接与用户的浏览历史相比较。而已访问的和未访问的这些类型称为伪类。
10.2 链接伪类(静态伪类)
只能用于超链接的样式。
a:link {color: #FF0000;} /* 未访问的链接 */
a:visited {color: #00FF00;} /* 已访问的链接 */
10.3 动态伪类
a:focus {color: #0000FF;} /* 当前拥有输入焦点时元素 */
a:hover {color: #FF00FF;} /* 鼠标移动到链接上 */
a:active {color: #FFFF00;} /* 选定的链接 */
动态伪类可以应用到任何元素。可以对非链接的元素应用动态样式。
input:focus {background:silver;}
10.4 超链接伪类顺序
通常建议是"link-visited-focus-hover-active".否则可能会失效。
“love for hate”
10.5 动态样式的实际问题
如将忆访问和未访问的链接设置为一种字体大小，而让鼠标停留的链接有更大的字体，在锚处于悬停状态时必须重绘文档，要求user-agent重新显示该链接之后的内容。不过应当避免依赖于这种行为的设计。
a:link, a:visited {font-size: 13px;}
a:hover {font-size: 20px;}
10.6 first-child伪类
first-child 伪类来选择元素的第一个子元素。
/*将第一个h1元素颜色设置为灰色*/
h1:first-child {color: grey;}
10.7 lang 伪类
根据元素的语言来选择；从应对的模式来讲，lang()伪类就像是 |= 属性选择器。
*:lang(en) {color: grey;}
10.8 结合伪类
鼠标指针停留在未由于链接上时，将链接变成红色，鼠标指针停留在已访问链接上时，链接变成紫色。
a:link:hover {color: red;}
a:visited:hover {color: maroon;}
- 注意：不要把互斥的伪类结合在一起使用。如
a:link:visited没有意义；
11. 伪元素选择器
11.1 irst-letter 伪元素
“first-letter” 伪元素用于设置一个块级元素首字母的样式：
/* 将h1元素的第一个字母变红色 */
h1:first-letter {color: red;}
11.2 first-line 伪元素
“first-line” 伪元素设置元素中首行的样式。
p:first-line {color: red;}
11.3 first-letter 与 first-line 限制
first-letter 与 first-line 只能用于标记或段落之类的块级元素，不能应用于超链接等行内元素。
所有的伪元素都必须放在出现该伪元素的选择器的最后面。
11.4 before/after 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
“:after” 伪元素可以在元素的内容之后插入新内容。
p:before {content: "[[";}
p:after {content: "]]"}
