学习笔记：《CSS权威指南》之选择器

类选择器：

• 通用选择器：
  .warning{font-weight:bold;}
• 特定选择器：
  p.warning {font-weight: bold;}
• 多类选择器：

<style>
    .warning {font-weight: bold;}
    .urgent {font-style: italic;}
    .warning.urgent {background: silver;}
</style>
<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>
<p>With plutonium,
    <span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span>
    . This can be accomplished be keeping the various masses separate.
</p>

通过把俩个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）;
但是如果一个多类选择器包含类名列表中所没有的一个类名，匹配就会失败。比如：
p.warning.help {background: red;}
不出所料，这个选择器将只匹配class包含次warning和help的那些p元素。因此，如果一个p元素的class属性中只有词warning和urgent，将不能匹配。不过，它能匹配一下元素：
<p class="urgent warning help">Help me!</p>

ID选择器

#lead-para {font-weight:bold;}
<p id="lead-para">Exeample.</p>

属性选择器

• 简单属性选择
  如果希望选择有某个属性的元素，而不论该属性的值是什么，例如，要选择有class属性(值不限)的所有h1元素，使其文本为银色：
  h1[class] {color:silver;}
<h1 class="fancy">Hello</h1>
  还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有href和title属性的HTML超链接的文本设为粗体：
  a[href][title] {font-weight: bold;}
• 根据具体属性值选择
  除了选择有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。例如：
  a[href="www.baidu.com"] {font-weight: bold;}
  与属性选择类似，可以把多个属性-值选择器链接在一起来选择一个文档，例如：
  a[href="www.baidu.com"][title=home] {font-size: 200%;}
  注意，这种格式要求必须与属性值完全匹配。如果遇到的值本身包含一个用空格分隔的值列表（如HTML属性class），匹配就会出问题。例如，考虑如下标记片段：
  <p type="barren rocky">Mercury</p>
  要根据具体属性值匹配这个元素，唯一的办法就是写作：
  p[type="barren rocky"] {font-weight: bold;}
  如果写成p[type=”barren”]将不能匹配示例标记。
• 根据部分属性值选择
  如果想 选择class属性中包含warning的元素，可以使用：p[class~="warning"] {font-weight: bold;}

子串匹配属性选择器

类型	描述
[attribute=value]	用于选取带有指定属性和值的元素
[attribute~=value]	用于选取属性值中包含指定词汇的元素
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute*=value]	匹配属性值中包含指定值的每个元素

~=其中的value必须是一个独立的单词，例如test-a和test a可以被选中testa不能被选中．
*=其中的value只要是值的子串就可以，例如test-a，test a和testa均可以被选中．
|=与~=的特性一样，^=与=的特性一样．因此平时还是用^=和=较好．

使用文档结构
当一个元素出现在另一个元素的下一层，则称前者是后者的子元素，父子关系是祖先-后代关系的特例。这二者之间有一个区别：在树视图中，如果一个元素在另一个元素的直接上一层，它们就有父子关系。如果从一个元素到另一个元素的路径上要经过俩层或多层，这些元素则有祖先-后代关系，而不是父子关系（当然，子元素也算是后代，父元素也算是祖先）。

后代选择器（P52）

后代选择器也称为包含选择器或上下文选择器。假设你希望只对h1元素继承的那些em元素应用样式。可以写作：
h1 em {background: gray;}
这个规则会把作为h1元素后代的em元素的背景变成灰色。其他em文本则不会被这个规则选中。
当然并不仅限于俩个选择器，例如：
ul ol ul em {color: gray;}

选择子元素

如果只想选择某一个元素的子元素。比方说只想选择只作为一个h1元素子元素（而不是后代元素）的strong元素。为此，可以使用子结合符，即大于号 >:
h1 > strong {color: red;}
还可以在同一个选择器中 结合使用后代选择器和子选择器。因此,table.summary td > p会选择作为一个td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含summary的class属性。

选择相邻兄弟元素

假设你希望对一个标题后紧接着的段落应用样式，或者向一个段落后紧接着的列表指定特殊的外边距。要选择紧接着在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟结合符，这表示为一个加号 +。
- 要去除紧接在一个h1元素后出现的段落的上边距，可以写作：
h1 + p {margin-top: 0;}
- 如下示例所示，相邻兄弟结合符还可以结合其他结合符：
html > body table + ul(margin-top: 1.5em;)
这个选择器解释为“选择紧接在一个table元素后出现的所有兄弟ul元素，该table元素包含在一个body元素中，body元素本身是html元素的子元素”。

伪类选择器

设置已访问页面的<a>都会是红色：
a:visited {color: red;}
分隔a和visited的冒号是伪类或伪元素的“名片”。所有伪类和伪元素关键字前面都有一个冒号。
- 链接伪类

伪类名	描述
:link	未访问的链接
:visited	已访问的链接

- 动态伪类

伪类名	描述
:focus	指示当前拥有输入焦点的元素，也就是说可以接受键盘输入或者能以某种方式激活的元素
:hover	鼠标移动到链接上
:active	选定的链接
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。

注意：
1.a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2.a:active 必须被置于 a:hover 之后，才是有效的。
3.动态伪类可以应用到任何元素，这一点很好，因为对非链接的元素应用动态样式通常很有用。例如，使用以下标记：input:focus {background: silver; font-weight: bold;}
4.建议按link-visited-hover-active(LVHA)的顺序声明链接样式P81；

选择第一个子元素

还还可以使用另一个静态伪类：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及en元素。给定以下两个规则：
p:first-child {font-weight: bold;}
li:first-child {text-transform: uppercase;}
第一个规则将作为某元素第一个子元素的所有p元素设置为粗体。第二个规则将作为某个元素(在HTML中，这肯定是一个ol或ul元素)第一个子元素的所有li元素变成大写。
最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。

结合伪类

在CSS2.1中，可以在同一个选择器中结合使用伪类。例如：
a:link:hover {color:red;}
a:visited:hover {color: maroon;}
用哪种顺序指定并不重要。写成a:hover:link会得到与a:link:hover一样的效果。

伪元素选择器

• 设置首字母样式
  first-letter用于设置一个块级元素首字母的样式，而且仅对该首字母设置样式：
  p:first-letter {color: red;}
• 设置第一行的样式
  类似地，:first-line可以用来影响元素中第一个文本行。例如，可以让一个文档中第一段的第一行变成紫色：
  p:first-line {color: purple;}
• 设置之前元素的样式
  假设想设置一种排版效果，在每个h2元素前加一堆银色中括号：
  h2:before {content: ")}"; color: silver;}
• 设置之后元素的样式
  body:after {content: " The End.";}