《CSS权威指南》学习记录——选择器

规则结构

每个规则都由两个部分组成：选择器（selector）和声明块（declaration block）。选择器定义了将影响文档中的哪些部分；声明块由一个或多个声明组成，其中每个声明都是一个属性-值对（property-value）。声明总有如下格式：属性名加冒号，再加值，再加分号。大多数情况下，值可以是一个关键字，或者是该属性可取关键字的一个列表，一般用空格分开。要注意的是，如果属性或值书写错误，则整个声明都会被忽略！

分组

可以将多个选择器放在一组，中间用逗号分隔。可以使用通配选择符*（universal selector）。同样的，声明也可以放在同一组。

常见类型

1. 元素选择器

文档的元素是最基本的选择器。HTML中的每个元素都可以作为选择器。

2.类选择器和ID选择器

要应用样式而不考虑具体涉及的样式，最常用的就是类选择器。语法：在HTML元素开始标记里加上class属性，再附上一个或一些值。在CSS中，可以用.class或元素名.class的方式来选择具有相应类名的元素，多类选择器的话，可以用元素名.class1.class2.class3的方式来选择，此时仅可以选择同时包含这些类名的元素。

ID选择器，语法和类选择器类似，在HTML中用id来赋值，在CSS中用#来进行选择。但是不同点在于，ID选择器不允许结合使用，因为它不允许有以空格分隔的词列表。另一个区别在于，如果你想确定应当向一个给定元素应用哪些样式，ID能包含更多含义。

HTML中类选择器和ID选择器区分大小写。

3.属性选择器（attribute selector）

有些标记语言中不能使用类选择器和ID选择器，为了解决这个问题，引入了属性选择器，它可以根据元素的属性以及属性值来选择元素。一共有4中类型的属性选择器。

1.简单属性选择

如果希望选择具有某个属性的元素，而不管该元素的值是什么，就可以使用简单属性选择。语法：[属性名]，也可以同时列举多个，也是取交集选择。

2.根据具体属性值选择

可以在属性名后加上对应的属性值，[属性名=”“], 注意，这种格式要求与属性值必须完全匹配。即只能选择那些属性值完全一样的元素。

3.根据部分属性值选择

如果属性能接受词列表，则可以对其中的任意一个值进行选择。语法：[属性名~=”“]。例如：p.moon和p[class~=”moon”]应用于HTML时是等价的。再举一个例子，img[title~=”Figure”]可以匹配值为“How To Figure Out Who’s In Charge”的title属性。

+[foo^=”hello”]选择foo属性值以”hello”开头的所有元素
+[foo$=”hello”]选择foo属性值以”hello”结尾的所有元素
+[foo=”hello”]*选择foo属性值中包含字串”hello”的所有元素

4.特定属性类型选择

通过例子说明：img[src |= “figure”]可以选择src属性值等于”figure”或以此开头的所有元素，它常用于匹配语言值。

使用文档结构

使用文档结构是CSS确定和应用样式的唯一途径。

理解父子关系

在HTML的文档结构中，每个元素都有自己的位置，要不是另一个元素的父元素，要不是另一个元素的子元素，且通常兼而有之。

后代选择器（descendant selector）

定义后代选择器，可以创建一些规则，使其只在某些结构中应用，而在其他结构中不起作用。例如：p em{color:#123;}，这个规则会把p里的em的文本颜色置为#123。同样的，可以有多个选择。要注意的是，后代选择器中，两个元素之间的层次间隔可以是无限的。比如上例，p中的所有em都会被选中，而不论其嵌套的有多深。

选择子元素

那么，当我们只想选择某一个元素的子元素时，可以使用子结合符>。注意，子选择器限制为只匹配结构树中直接相连的元素。可以在同一个选择器中同时使用后代选择器和子选择器，例：table.summer s > p会选择p元素，该元素是s的直接后代，且s嵌套在一个拥有summer值的class属性的table元素中。从右向左一步步分析(⊙v⊙)。

选择相邻兄弟元素

如果要选择紧接在另一个元素后的元素，且二者有相同的父元素，则可以使用相邻兄弟结合符（adjacent sibling combinator），表现为+。

关于相邻兄弟选择器确实有些地方没理解，这里先暂时直接引用w3c中的文档。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
再举一个例子：

<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>

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

相邻兄弟结合符还可以结合其他结合符：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

伪类和伪元素

利用伪类和伪元素可以根据某些条件而非文档结构向文档中的某些部分应用样式，而且无法通过研究文档的标记来准确判断采用何种方式应用样式。例如，你不知道什么考试结束，但你知道一旦考试结束，所有人都会交卷。尽管无法预测什么时候发生，但不影响对后果的预测。

伪类选择器

使用伪类的选择器称为伪类选择器。
例如：

a:link{color:#123;}
a:visited{color:maroon;}

即为链接伪类，分别可以确定未访问过的链接（含有href属性）和已访问过的链接的颜色。
注意，冒号是伪类或伪元素的名片。

可以结合使用类选择器和伪类选择器。
例如：

<a href="***" class="external">Another page</a>

则在CSS中可以专门为外部链接设定样式：

a.external:link,a.external:visited{color:#666;}

该语法也同样适用于ID选择器。
上述两种伪类是静态的，即第一次显示之后，它们一般不会再改变文档的样式。

动态伪类

动态伪类可以根据用户的行为改变文档的样式。

：focus 指示当前拥有输入焦点的元素
：hover指示当前鼠标指针停留在哪个元素上
：active指示被用户输入激活的元素

注意，伪类的顺序很重要。通常的顺序为“link-visited-focus-hover-active”。但在某些情况下要改变这个顺序。

动态伪类可以应用到任何元素上。
例如：

input:focus{background:yellow;font:bold;}

可以突出显示当前正在输入的部分。

CSS规范指出，文档在第一次显示后，用户代理不必重绘文档。因此，应该避免依靠这种行为来实现期望的样式。

选择第一个子元素

可以使用一个静态伪类first-child来选择第一个子元素。
例如：

<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
注意，容易误解为p:fist-child{color:#123;}是选择p元素的第一个子元素，这是因为没有理解伪类的含义。
再举几个例子：

p:first-child{...}
p>i:first-child{...}
p:first-child i{...}

上面3个例子分别匹配了第一个p元素，匹配了所有p元素中的第一个i元素，匹配了所有作为第一个子元素的p元素的所有i元素。

根据语言选择

有时可能会需要根据语言来指定样式，此时可以用：lang来选择。
例如：

*：lang(fr){color:silver;}

可以把所有法语元素设计为银色文本。

结合伪类

伪类也可以结合使用。
例如：

a:link:hover:lang(de){color:purple;}
a:visited:hover:lang(de){font:italic;}

当鼠标停留在德语元素的未访问过的链接上时会显示紫色，停留在德语元素访问过的连接上时会显示斜体。
注意不要把互斥的伪类结合起来使用，一般会将之忽略掉。

伪元素选择器

CSS伪元素用于向某些选择器设置特殊样式。

设置首字母样式

:first-letter

该伪元素用于设置一个块级元素首字母的样式。

设置第一行的样式

:first-line

该伪元素用于设置一个块级元素的第一行文本。

设置之前和之后元素的样式

p:before{content:"**";color:#123;}
p:after{content:"$$";color:silver;}

该伪元素可以在元素开始和结束的位置插入指定的样式。

注意，所有伪元素都必须放在所在选择器的最后面。