选择器

CSS 的主要优势之一是能轻易为同类型的所有元素应用一组样式。是不是听上去没有想象的那么震撼？
那么请这样想想看: 编辑一行 CSS 就能改变所有标题的颜色。不喜欢现在使用的蓝色标题？那就修改那行代码，改成紫色、黄色、红褐色，抑或想使用的其他颜色。
如此一来，设计师便能集中精力在设计上，而不必为琐事烦忧。
下次开会时，如果有人还想要绿色阴影，只需编辑样式，再单击刷新按钮就行了。很酷吧！只需几秒便能得到想要的效果，而且每个人都能看得到。

CSS 不能解决所有问题，例如，CSS(至少现在)不能修改 PNG 图像的色彩空间。
但是使用 CSS 的确能轻易做些全局性修改。下面先从选择符和结构学起。

选择器是 CSS 中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率

样式的基本规则

前面说过，CSS 的一个核心优势是可以为文档中某种类型的元素全部应用相同的规则。
假如我们想让所有 h2 元素都显示为灰色。以前，我们只能编辑 HTML，在每个 h2 元素中插入 <font color="gray">...</font> 标签。
就算使用 style 属性，也省不了多少时间，你要为每个 h2 元素设定 style="color: gray;" 属性。这两种方式如下所示:

1 2	`<h2><font color="gray">This is h2 text</font></h2> <h2 style="color: gray;">This is h2 text</h2>`

如果文档中有大量 h2 元素，这将是一个漫长乏味的过程。
更糟的是，如果后来决定 h2 元素应该显示成绿色，而不是灰色，就必须重来一次，手动修改所有标签(是的，以前就是这么做的)

CSS 样式便于修改和编辑，而且能应用到指定的所有文本元素上。
例如，可以编写如下的规则把所有 h2 元素的颜色设为灰色:

1
2
3

h2 {
    color: gray;
}

如果想修改 h2 元素的颜色，比如改为银色，只需修改颜色值:

1
2
3

h2 {
    color: silver;
}

类型选择符:选取HTML标签

用于选取特定 HTML 标签的选择符叫类型选择符或元素选择符。
这种选择符的作用特别大，能把样式应用到网页中的每个目标标签上。使用这种选择符，只需少量工作就能大幅修改网页的外观。
假如想让网页中每个段落都使用相同的字体、颜色和字号，只需编写一个选择符为 p(表示 <p> 标签)的样式即可。
其实，类型选择符用于重新定义浏览器显示所选标签的方式。

类选择符和 ID 选择符

类选择器

应用样式而不关心所涉及的元素，最常使用类选择器。
然后，在使用之前，要修改文档的标记，让类选择符起作用。修改方式是设定 class 属性

<p class="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 by keeping the various masses separate.
</p>

为了把类选择符定义的样式应用到元素上，必须为 class 属性赋予适当的值。
在上面的示例中，我们把两个元素的 class 属性设为 warning: 第一个段落和第二段中的 span 元素

现在我们要招到一种方法为设定了 class 属性的元素赋予样式。
在 CSS 中，选择类的句法是在 class 属性的前面加上点号(.)。

1
2
3

.warning {
    font-weight: bold;
}

除了单独选择类之外，还可以结合元素选择符, 例如，你可能想让整段文字都为提醒时才加粗:

1
2
3

p.warning {
    font-weight: bold;
}

此时，还可以先使用通用的类选择符定义一个样式，然后再结合元素选择符，进一步指明适用的元素，如下所示:

.warning {
    font-style: italic;
}
span.warning {
    font-weight: bold;
}

一个标签使用多个类

除了可以把同一个类应用到不同的标签上之外，一个标签还可以使用多个类。
编写多个类样式，在一个标签中设置多个类，这听起来要做很多工作，可是却经常这么做。

例如，遇到这种情况可以在一个标签中使用多个类:
假如我们在设计一个管理购物车的界面，需要使用多个按钮，每个按钮各司其职，一个用于删除购物车里的商品，一个用于添加商品，一个用于编辑数量

作为好的设计师，我们希望这些按钮的部分外观相同，例如都有圆角，而且使用相同的字体，不过其他方面则要不同:
删除按钮的背景为红色，添加按钮的背景为绿色等。
为了实现这种同中有异的样式，我们可以使用两个类: 一个类应用于所有按钮，另一个类则只应用于特定的按钮。

首先，编写.btn(button 的简写)类样式:

.btn {
  border-radius: 5px;
  font-family: Arial, Helvetica, serif;
  font-size: .8em;
}

然后，编写各种类型的按钮使用的类样式:

.delete {
  background-color: red;
}
.add {
  background-color: green;
}
.edit {
  background-color: grey;
}

最后，在标签上设置多个类，让所有按钮具有部分相同的外观，但是背景色却各不相同:

1
2
3

<button class="btn add">Add</button>
<button class="btn delete">Delete</button>
<button class="btn edit">Edit</button>

这种方式有个好处，如果不想让按钮有圆角，或者想使用其他字体，只需修改 .btn 样式就能更改所有按钮的外观。
类似地，如果想把编辑按钮的灰色背景改为黄色，只需修改 .edit 样式，其他按钮的背景不会受到影响

根据 HTML 规范，class 属性的值可以是多个词，词之间使用空格分割。比如你想把某个元素标记为特别重要的提醒，可以这么写:

<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 by keeping the various masses separate.
</p>

词的顺序无关紧要，写成 warning urgent 也行，结果是完全一样的。

假如你想让 class 属性的值为 warning 的元素显示为粗体，值为 urgent 的元素显示为斜体，而同时拥有二者的元素具有银色背景，样式可以这样写:

.warning {
    font-weight: bold;
}
.urgent {
    fnot-style: italic;
}
.warning.urgent {
    background: silver;
}

把两个类选择符串在一起，选择的是同时具有两个类名的元素，而且对类名的顺序没有要求。

ID 选择符

ID 选择符在某些方面类似于类选择符，不过二者之间有些重要区别。
首先，ID 选择符的开头不是点号，而是个散列字元(#)，也叫井号、哈希符号、哈希记号或三连棋棋盘。
因此，你可能见过类似下面的规则:

1
2
3

*#first-para {
    font-weight: bold;
}

这个规则把 id 属性为 first-para 的元素中的文本设为粗体

第二个区别是，ID 选择符引用的不是 class 属性的值，而是 id 属性的值。
下面举个例子

*#lead-para {
    font-weight: bold;
}

<p id="lead-para">This paragraph will be boldfaced.</p>
<p>Tis paragraph will NOT be bold.</p>

与类选择符一样，ID 选择符中的通用选择符也可以省略。前面的示例还可以写成这样:

1
2
3

#lead-para {
    font-weight: bold;
}

这样写与之前的效果一样。

在使用 JavaScript 或者内容很多的网页中，ID 选择符有特殊的作用。除此之外，没有强烈的理由不用类而用 ID

注意: Web 设计圈有个趋势，尽量不在 CSS 中使用 ID 选择符。要说明其中的原因，需要对 CSS 有较为深入的理解

ID 的优势:
(1) 为网页中的元素设定 ID 后，JavaScript 程序员可以通过 ID 轻易定位并处理网页中的某部分内容。
例如，程序员经常会为表单中的元素设定 ID，例如填写访客名字的文本框。JavaScript 通过 ID 定位这个表单元素可以做很多处理，例如，确保访客提交表单时那个字段不是空的

(2) 使用 ID 还能链接到网页中的特定部分，对于内容多的网页来说，这样便于快速导航。
如果有个按字母表顺序排列的术语表，可以使用 ID 选择符链接到以各个字母开头的部分。
这样，访客单击 "R" 后会立即跳到以字母 "R" 开头的术语部分。我们甚至不用为此编写任何 CSS，单纯使用 HTML 就能实现。
首先，在网页中想链接到的位置设置 ID 属性。假如在词汇表中使用 <h2> 标签标识字母表里的字母，随后列出词汇，使用定义列表或一系列段落都行。
那么，只需为每个 <h2> 标签设定合适的 ID 属性，例如 <h2 id="R">R</h2>。
创建链接时，在 URL 后加上 # 号，然后再指明 ID 名，例如 index.html#R。
这个链接会直接指向 index.html 网页中 ID 为 R 的元素(在这种用法中，ID 相当于具名锚记，<a name="R">R</a>)

在类选择符和ID选择符之间选择

类可以赋予任意个元素，warning 这个类名赋予了 p 元素和 span 元素，此外还可以赋予更多的元素。
而 ID 就不同了，在一个 HTML 文档中，一个 ID 能且只能使用一次。
因此，如果文档中有个元素的 id 属性值为 lead-para，其他元素的 id 属性就不能再设为这个值

注意:
实际上，浏览器不一定总会检查 HTML 中的 ID 是不是唯一的。
也就是说，如果 HTML 文档中的多个元素具有相同的 ID 属性，相同的样式可能会应用到每个元素上。这是不正确的行为，但却可能发生。
文档中出现多个相同的 ID 值还不利于 DOM 脚本编程，因为 getElementById() 等函数预期只有一个 ID 属性为指定值的元素。

与类选择符不同，ID 选择符不能串在一起使用，因为 ID 属性的值不能是以空格分隔的列表

此外还要注意，类选择符和 ID 选择符可能是区分大小写的，这取决于文档语言。
根据 HTML 规范，类和 ID 的值是区分大小写的，因此类选择符和 ID 选择符的大小写必须与文档中的一致。
因为，对于下述 CSS 和 HTML 而言，元素中的文本不会显示为粗体:

<style>
    p.criticalInfo {
        font-weight: bold;
    }
</style>

<p class="criticalinfo">
    Don't look down.
</p>

因此字母 i 的大小写不一样，所以上例中的选择符无法匹配元素。

给标签组定义样式

有时我们需要一种简单的方法把相同的格式应用到不同的元素上。
例如，可能想让网页中的所有标题使用相同的颜色和字体显示。
如果分别为每一级标题(h1,h2,h3,h4 等)定义样式，工作量太大；
如果以后想修改所有标题的颜色，要修改六个不同的样式。遇到这种需求时，最好使用群组选择符，把一个样式指定给多个选择符

群组选择符的组成

群组选择符由一系列逗号分开的选择符组成。因此，如果想让所有标题都使用相同的颜色，可以编写如下规则:

1
2
3

h1, h2, h3, h4, h5, h6 {
  color: #F1CD33;
}

这个列子只用了类型选择器，其实，群组选择符中可以使用任何有效的选择符(也可以多种选择符混用)。
例如，下述群组选择符把相同的文字颜色应用到 <h1> 标签、<p> 标签，类为 .copyright 的标签和 ID 为 #banner 的标签上:

1
2
3

h1, p, .copyright, #banner {
  color: #F1CD33;
}

通用选择符(星号`*`)

使用群组选择符便于把相同的样式属性应用到网页中不同的元素上。
除此之外，CSS 还提供了一个超级群组选择符 -- 通用选择符。星号(*)是通用选择符的简写，用于选择所有标签

比如说，我们想让网页中的所有标签都以粗体显示，那么群组选择符可以写成下面这样:

1
2
3

a, p, img, h1, h2, h3, h4, h5 ... yadda yadda ... {
  font-weight: bold;
}

使用星号也能让 CSS 选择网页中的所有 HTML 标签，而且这样写更简洁:

1
2
3

* {
  font-weight: bold;
}

通用选择符也可以作为后代选择符的一部分，这样就可以把样式应用到某个元素内部的所有标签上。
例如，.banner *选择符会选取类为 banner 的元素内部的每一个标签

通用选择符不指定任何具体的标签类型，因此很难预测对使用各种 HTML 标签的网站有什么影响。
如果想装饰不同的元素，网页制作高手会使用继承

不过，很多 Web 设计师会使用通用选择符删除所有块级元素四周的空白。
使用 CSS 的 margin 属性可以在元素外围添加空白，使用 padding 属性可以在边界与内容之间添加空白。
浏览器会自动在不同的标签四周添加不同量的空白，如果想统一，删除所有元素四周的空白，可以使用下述样式:

* {
  padding: 0;
  margin: 0;
}

为标签里的标签定义样式

类型选择符和类选择符各有利弊，类型选择符写起来容易，信手拈来，不过会让所有实例都具有相同的外观。
如果希望网页中的所有 <h2> 标签都显示成相同的样子，可以这么做。
类选择符和 ID 选择符更灵活，可用于装饰网页中的单个元素。
不过，为了使用类样式或 ID 样式，要在想应用样式的 HTML 标签上设置相应的类或 ID。
这不仅增加了工作量，还增加了 HTML 文件的代码量。我们要找到一种方法，既像类型选择符那样简单，又像类选择符和 ID 选择符那样精确。
恰好，CSS 提供了这种方法 -- 后代选择符。

后代选择符也应用于一组相似的标签上(与类型选择符相似)，只不过这些标签位于网页中某一部分里面。
后代选择符好比是说: "导航栏里的所有 <a> 标签注意了，我为你们定义了一些格式，其他的 <a> 标签靠边站，没你们什么事"

HTML 家谱

组成网页的 HTML 相当于家谱，每个 HTML 标签表示其中一个家庭成员。
网页中的第一个 HTML 标签，<html> 标签，相当于所有其他标签的始祖。
<head> 和 <body> 标签在 <html> 标签里面，所以 <html> 标签是二者的祖辈。
同理，在其他标签里的标签是后代。在下述代码中，<title> 标签就是 <head> 标签的后代:

<html>
  <head>
    <title>A Simple Document</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>A paragraph of <strong>important</strong>text.</p>
  </body>
</html>

上述 HTMl 代码可以画成图 3-4 所示的关系图，展示网页中各标签之间的关系。
最顶端是 <html> 标签，这个标签分为两支，分别表示 <head> 和 <body> 标签。
这两个标签又各自包含其他标签，并且依次类推下去。如果想知道标签之间的包含关系，可以为任何网页画这种关系图

图3-4 HTML 代码由嵌套的标签组成，即标签里有标签。标签之间的这种关系，也就是相互之间嵌套的方式，构成一种家谱

通过树状关系图能看清 CSS 如何处理网页中元素之间的关系。

祖辈: 外层 HTML 标签是内层标签的祖辈。如图 3-4 所示，<html> 标签是所有其他标签的祖辈，而 <body> 标签只是内部所有标签(<h1>、<p> 和 <strong> 标签)的祖辈
后代: 标签里面的其他标签是后代。在图 3-4 中，<body> 标签是 <html> 标签的后代，<p> 标签既是 <body> 标签的后代，也是<html>标签的后代
父辈: 父辈标签是另一个标签的直接祖辈。在图 3-4 中，在某个标签之上并与之直接相连的标签是父辈，因此，<html>标签是<head>和<body>的父辈，而不是其他标签的父辈；<p>标签是<strong>标签的父辈
子代: 直接被另一个标签包围的标签是外层标签的子代。在图 3-4 中，<h1>和<p>标签是<body>标签的子代，而<strong>标签不是。<strong>标签直接包含在<p>标签里，所以是<p>标签的子代
同辈: 父辈相同的标签叫同辈标签，相当于兄弟姐妹。在 HTML 关系图中，同辈标签排在同一级，拥有相同的父辈。在图 3-4 中，<head>和<body>是同辈标签，<h1>和<p>也是同辈标签

构建后代选择符

后代选择符利用 HTML 家谱的树状结构为标签里的标签赋予不同的样式。
假如网页中有个<h1>标签，我们想使用<strong>标签强调其中某个单词。
可问题是，大多数浏览器都会以粗体显示标题和<strong>标签，导致人们看不出强调的词与标题里的其他词有什么区别。

我们可以使用类型选择符为<strong>标签指定其他颜色，让它与标题里的其他内容区分开，可以这算不上是一种解决方案，因为不管你想不想，网页中每一个<strong>标签的颜色都会变。
这时使用后代选择符才是正确的，仅当<strong>标签出现在<h1>标签里才修改颜色。

上述难题的解决方法如下:

1
2
3

h1 strong {
  color: red;
}

这个样式的意思是，只把一级标题里的<strong>标签设为红色，网页中的其他<strong>标签则不受影响。
使用类样式也能实现相同的效果，例如定义 .strongHeader 样式，不过这种方法要编辑 HTML，在那个标题里的 <strong> 标签中添加 class="strongHeader"。
而使用后代选择符无需向 HTML 中添加任何代码，只需定义样式即可。

后代选择符按照 HTML 家谱中祖辈和后代之间的关系为嵌套在其他元素中的元素赋予样式。
我们根据元素在家谱中的关系构建后代选择符，把祖辈放在左边，真正想应用样式的标签放在最右边。
以图 3-5 所示所示的网页为例，注意，无序列表的条目中有三个链接(<a> 标签)，段落中也有一个链接。
如果想让无序列表里的链接与网页中的其他链接外观不同，可以使用下述后代选择符:

1
2
3

li a {
  font-family: Arial;
}

上述规则的意思是，"列表项目(li)里的所有链接(a)都使用 Arial 字体"。后代选择符可以由两个以上元素组成。
下述选择符都能选取图 3-5 中无序列表里的 <a> 标签:

ul li a
body li a
html li a
html body ul li a

这四个选择符的作用相同，因此表明，无需指明目标标签的所有直系。
例如，第二个选择符，body li a，无需使用 ul。只要<li>标签(同时也是 <body> 标签的后代)的后代里有 <a> 标签，这个选择符就有效。
如果<a>标签在<em>标签里，<em>标签在<strong>标签里，<strong>标签在<li>标签里，也能使用这个选择符

图3-5 右侧的简单树状关系图表示的是左侧网页的结构

一般来说，应该使用能达到目的的最简短的后代选择符。所有标签都在 <html> 和 <body> 标签里，因此没必要在你后代选择符中指定二者。

同样地，后代选择符也不局限于只能使用类型选择符。
我们可以使用不同类型地选择符构建复杂地后代选择符。比如说只想让介绍里地链接显示为黄色(介绍通过 intro 类获取)，后代选择符可以这么写:

1
2
3

.intro a {
  color: yellow;
}

这个样式地意思很简单: 如果某个标签的类为 intro，就把上述样式应用到这个标签的所有链接后代(a)上。

创建模块

后代选择符经常用于装饰代码模块，即网页中具有相同功能的一系列 HTML 代码。
假如网页中有个 <div> 标签，用于列出公司最近的新闻，这个标签的 HTML 代码可能是下面这样:

<div>
  <h2>Our company is great!</h2>
  <p>More information about why our company is so great</p>
  <h2>Another news item</h2>
  <p>Infomation about the other news item...</p>
  <h2>...and so on...</h2>
  <p>...and so oon ...</p>
</div>

如果给起始标签 <div> 加上类，例如 <div class="news">，然后就可以使用后代选择符让新闻列表中不同的标签具有不同的外观，比如说:

.news h2 {
  color: red;
}
.news p {
  color: blue;
}

现在，新闻列表里的 <h2> 标签会显示为红色，而段落会显示成蓝色。
后代选择符还可以由多个类名组成(而且经常这么写)。假如我们在编写一个列出组织中各成员联系方式的网页，可能会把各成员的联系方式写在单独的<div>标签里，并为其中的元素设定类，如下所示:

<div class="contact">
  <p class="name">John Smith</p>
  <p class="phone">555-555-1234</p>
  <p class="address">1234 Elem St</p>
</div>

这样就可以使用多个后代选择符为联系信息中的各个元素定义样式:

.contact .name {
  font-weight: bold;
}
.contact .phone {
  color: blue;
}
.contact .address {
  color: red;
}

注意: 你可能在样式表中见过这种选择符: p.intro，这看起来像是后代选择符，因为有 HTML 标签，也有类，其实并不是。
p 和 .intro 之间没有空格，因此只有类为 intro 的 <p> 标签(<p class="intro">)才适用这个样式。如果在二者之间加上空格，效果就不一样了。

1
2
3

p .intro {
  color: yellow;
}

稍微修改之后得到的选择符选取的是类为 intro 的标签，而且要是<p>标签的后代。
也就是说，这个选择符选取的不是段落，而是段落里的标签。一般来说，为了尽量让样式具有灵活性，最好不加 HTML 标签(即，不写成 p.intro，而是直接写成 .intro)

伪类和伪元素

有时需要选择网页中不是由标签表示却易于标识的部分，例如段落的第一行，或者鼠标悬停其上的链接。
CSS 为这种页面组成部分提供了少量选择符--伪类和伪元素

链接的样式

根据访客与链接的交互方式，链接有四种状态，这四种状态的外观可以使用四个伪类装饰。这些伪类分别对应下述四个状态:

a:link 选取访客未访问，而且鼠标没有悬停其上，也没有正在单击的链接。这个选择符定义的样式是尚未点击的普通链接
a:visited 选取的是根据 Web 浏览器的历史判断已由访客单击的链接。我们可以使用不同于普通链接的外观装饰这种链接，告诉访客已经访问过这些链接了
a:hover 用于修改鼠标悬停其上的链接外观。这种变化效果不只是为了好玩，还可以让导航栏里的按钮有视觉反馈

除了链接之外，其他元素也可以使用:hover伪类。例如，可以使用这个伪类突出显示<p>或<div>元素中访客悬停其上的文字。
此时，选择符不是a:hover(这是链接专用的)，而要定义名称为p:hover的样式，指明鼠标悬停在段落上时显示什么样的特殊效果。
如果只想装饰类为 highlight 的标签，可以定义名为 .hightlight:hover 的样式

a:active 用于设定访客点击链接时链接的外观。也就是访客按下鼠标按钮到松开之前那几纳秒。

注意: 使用目前所学的选择符(标签选择符，类选择符，ID 选择符，后代选择符，群组选择符等)就能设计出精美可用且易于维护的网站

属性选择器

不管是类选择符还是 ID 选择符，我们选择的其实都是属性的值。
CSS2 引入了属性选择符(attribute selector)，根据属性及其值选择元素。
属性选择符大致可以分为四类: 简单属性选择符、精准属性值选择符、部分匹配属性值选择符和起始值属性选择器

简单属性选择器

如果想选择具有某个属性的元素，而不管属性的值是什么，可以使用简单属性选择符。
例如，若想选择具有 class 属性(可以包含任何值)的所有 h1 元素，把文本设为银色，可以这样写:

1
2
3

h1[class] {
    color: silver;
}

在 HTML 文档中，你可以发挥自己的想象力，充分利用这一功能。
例如，你可以为所有具有 alt 属性的图像编写样式，突出显示格式正确的图像:

1
2
3

img[alt] {
    border: 3px solid red;
}

(这个示例更多的是出于诊断目的，即判断图像的标记是否正确，在设计层面没有太大的意义。)

如果想把具有 title 属性的元素(在多数浏览器中，当鼠标悬停在这样的元素上时，会显示 “提示框”)加粗显示，可以这么写:

1
2
3

*[title] {
    font-weight: bold;
}

类似地，可以为具有 href 属性的元素(a 元素)编写样式，只应用到超链接上，而不应用到锚记上。

此外，还可以基于多个属性选择。为此，要把多个属性选择符串在一起。
例如，若想让同时具有 href 和 title 属性的 HTML 超链接显示为粗体，可以这样写:

1
2
3

a[href][title] {
    font-weight: bold;
}

对下述标记来说，第一个链接会显示为粗体，而第二个和第三个链接都不会显示为粗体:

1
2
3

<a href="http://www.w3.org/" title="W3C Home">W3C</a><br/>
<a href="http://www.webstandards.org">Standards Info</a><br/>
<a title="Not a link">dead.letter</a>

根据精准的属性值选择

此外，还可以进一步缩小范围，只选择属性为特定值的元素。比如说我们想把指向 Web 服务器上某个文档的超链接显示为粗体，可以这么写:

1
2
3

a[href="http://www.css-discuss.org/about.html"] {
    font-weight: bold;
}

这个规则把 href 属性的值为 http://www.css-discuss.org/about.html 的 a 元素显示为粗体。
任何变化，即便没有 www. 部分，或者换成安全协议 https, 都无法匹配。

可以为任何元素指定任何属性和值的组合。然而，如果属性和值的组合在文档中未出现，那么选择符不匹配任何元素。

与选择属性时一样，可以把多个属性和值选择符串在一起。
例如，若想把 href 属性的值为 http://www.w3.org/，而且 title 属性的值为 W3C Home 的 HTML 超链接显示为两倍字号，可以这样写:

1
2
3

a[href="http://www.w3.org/"][title="W3C Home"] {
    font-size: 200%;
}

对下面的标记来说，这个样式将把第一个链接的文本字号加倍，而第二个和第三个链接不受影响:

1
2
3

<a href="http://www.w3.org/" title="W3C Home">W3C</a><br/>
<a href="http://www.webstandards.org" title="Web Standards Organization">Standards Info</a><br/>
<a href="http://www.example.org/" title="W3C Home">dead.link</a>

再次说明，这个形式要求属性的值与指定的值完全一致。
属性的值是由空格分隔的多个词时(例如 HTML 中的 class 属性)要小心，以防匹配出错。

对于下面的标记来说:

1	`<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>`

若想使用精确的属性值选择这个元素，要写成:

1
2
3

p[class="urgent warning"] {
    font-weight: bold;
}

上述规则选择得到是 class 属性的值与 "urgent warning" 完全一样的 p 元素，两个词的顺序一模一样，而且中间有个空格。这其实是精确匹配字符串

此外要知道，ID 选择符与引用 id 属性的属性选择符不完全等效。
也就是说,h1#page-title 和 h1[id="page-title"]之间有些微妙而不容忽视的区别

根据部分属性值选择

有时，我们想根据属性值的一部分选择元素，而不是完整的值。
CSS 为这种情况提供了多种选择，以不同的方式匹配属性值的子串。

形式	说明
`[foo\|="bar"]`	选择的元素有 foo 属性，且其值以 bar 和一个英文破折号开头，或者值就是 bar 本身
`[foo~="bar"]`	选择的元素有 foo 属性，且其值是包含 bar 这个词的一组词
`[foo*="bar"]`	选择的元素有 foo 属性，且其值包含子串 bar
`[foo^="bar"]`	选择的元素有 foo 属性，且其值以 bar 开头
`[foo$="bar"]`	选择的元素有 foo 属性，且其值以 bar 结尾

一种特别的属性选择符

这些属性选择符中的第一个匹配属性值的一部分，描述起来困难，举个例子就明白了。以下述规则为例:

1
2
3

*[lang|="en"] {
    color: white;
}

这个规则选择 lang 属性的值为 en 或者以 en- 开头的元素。因此，对下述示例标记来说，前三个元素会被选中，而后两个不会:

<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">G'day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>

一般来说，[att|="val"] 形式可用于选择任何属性及其值。
假设一个 HTML 文档中有一系列插图，而插图的文件名是 figure-l.gif 和 figure-3.jpg 这样的。使用下述选择符可以匹配所有插图:

1
2
3

img[src|="figure"] {
    border: 1px solid gray;
}

此外，如果你再开发一个 CSS 框架或模式库，没必要提供 "btn btn-small btn-arrow btn-active" 这样冗长的类，可以声明 "btn-small-arrow-active"，然后使用下述规则选择具有这个类的元素:

<style>
*[class|="btn"] {
    border-radius: 5px;
}
</style>
<button class="btn-small-arrow-active">Click Me</button>

结构性伪类选择器

伪类选择器

a:link {
    color: #FF0000;
    text-decoration: none;
}
a:visited {
    color: #00ff00;
    text-decoration: none;
}
a:hover {
    color: #ff00ff;
    text-decoration: underline;
}
a:active {
    color: #0000ff;
    text-decoration: underline;
}

伪元素选择器

伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对 CSS 中已经定义好的伪元素使用的选择器，它的使用方法如下所示

1
2
3

选择器:伪元素 {
    属性: 值;
}

伪元素选择器也可以与类配合使用，使用方法如下所示

1
2
3

选择器.类名:伪元素 {
    属性: 值;
}

在 CSS 中，主要有如下四个伪元素选择器

(1) first-line 伪元素选择器
first-line 伪元素选择器用于向某个元素中的第一行文字使用样式

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>first-line</title>
<style>
  p:first-line {
    color: red;
  }
</style>
<p>段落中的第一行。<br>段落中的第二行</p>

(2) first-letter 伪元素选择器

first-letter 伪元素选择器用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或日文等汉字)使用样式

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>first-letter</title>
<style>
  p:first-letter {
    color: red;
  }
</style>
<p>这是一段中文文字</p>
<p>This is an english text.</p>

(3) before 伪元素选择器

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>first-letter</title>
<style>
  li:before {
    content: 'lalala '
  }
</style>
<ul>
  <li>列表项目1</li>
  <li>列表项目2</li>
  <li>列表项目3</li>
</ul>

(4) after 伪元素选择器

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>first-letter</title>
<style>
  li:after {
    content: ' (test)';
    font-size: 13px;
    color: red;
  }
</style>
<ul>
  <li>列表项目1</li>
  <li>列表项目2</li>
  <li>列表项目3</li>
</ul>

结构性伪类选择器 root,not,empty和target

root 选择器:
root 选择器将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在 HTML 页面中就是指包含着整个页面的 "<html>" 部分

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>root选择器</title>
<style>
  body {
    background-color: limegreen;
  }
  :root {
    background-color: yellow;
  }
</style>
<h1>选择器概述</h1>
<p>
  &nbsp;&nbsp;&nbsp;&nbsp;选择器是 CSS3 中一个重要的内容。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>

另外，在使用样式指定 root 元素与 body 元素的背景时，根据不同的指定条件背景色的显示范围会有所变化。同样是上面这个例子，如果不使用 root 选择器来指定 root 元素的背景色，只指定 body 元素的背景色，则整个页面就全变成绿色了

not 选择器：
如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用 not 选择器

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>not选择器</title>
<style>
  body *:not(h1) {
    background-color: limegreen;
  }
</style>
<h1>选择器概述</h1>
<p>
  &nbsp;&nbsp;&nbsp;&nbsp;选择器是 CSS3 中一个重要的内容。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>

empty 选择器
使用 empty 选择器来指定当元素中内容为空白时使用的样式。

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>empty</title>
<style>
  :empty {
    background-color: yellow;
  }
</style>
<table border="1" cellspacing="0">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td></td>
  </tr>
</table>

target 选择器

使用 target 选择器来对页面中某个 target 元素(该元素的 id 被当作页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到 target 元素后起作用

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>empty</title>
<style>
  :target {
    background-color: yellow;
  }
</style>
<p id="menu">
  <a href="#text1">示例文字 1</a>
  <a href="#text2">示例文字 2</a>
  <a href="#text3">示例文字 3</a>
</p>
<div id="text1">
  <h2>示例文字1</h2>
  <p>此处略去...</p>
</div>
<div id="text2">
  <h2>示例文字2</h2>
  <p>此处略去...</p>
</div>
<div id="text3">
  <h2>示例文字3</h2>
  <p>此处略去...</p>
</div>

选择器first-child,last-child,nth-child,nth-last-child

(1) 单独指定第一个子元素、最后一个子元素的样式

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>empty</title>
<style>
  li:first-child {
    background-color: yellow;
  }
  li:last-child {
    background-color: skyblue;
  }
</style>
<ul>
  <li>列表项目 1</li>
  <li>列表项目 2</li>
  <li>列表项目 3</li>
  <li>列表项目 4</li>
  <li>列表项目 5</li>
</ul>

另外，如果页面中具有多个 ul 列表，则该 first-child 选择器与 last-child 选择器对所有 ul 列表都适用

(2) 对指定序号的子元素使用样式

指定 ul 列表中第二个 li 列表项目的背景为黄色，倒数第二个列表项目的背景色为浅蓝色

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>empty</title>
<style>
  li:nth-child(2) {
    background-color: yellow;
  }
  li:nth-last-child(2) {
    background-color: skyblue;
  }
</style>
<ul>
  <li>列表项目 1</li>
  <li>列表项目 2</li>
  <li>列表项目 3</li>
  <li>列表项目 4</li>
  <li>列表项目 5</li>
</ul>

(3) 对所有第奇数个子元素或第偶数个子元素使用样式

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>empty</title>
<style>
  li:nth-child(odd) {
    background-color: yellow;
  }
  li:nth-last-child(even) {
    background-color: skyblue;
  }
</style>
<ul>
  <li>列表项目 1</li>
  <li>列表项目 2</li>
  <li>列表项目 3</li>
  <li>列表项目 4</li>
  <li>列表项目 5</li>
</ul>

另外，使用 nth-child 选择器与 nth-last-child 选择器时，虽然在对列表项目使用时没有问题，但是当用于其他元素时，还是会出现问题

选择器 nth-of-type和nth-last-of-type

使用 nth-child 和 nth-last-child 时会产生的问题：

"he:nth-child(odd)"这行代码的含义，并不是指“针对 div 元素中第奇数个 h2 子元素来使用”，而是指“当 div 元素中的第奇数个子元素是 h2 子元素时使用”

当父元素是列表时，因为列表中只可能有列表项目一种子元素，所以不会有问题，而当父元素是 div 时，因为 div 元素中可能会包含多种元素，所以可能会出现问题

在 CSS 3 中，使用 nth-of-type 选择器与 nth-last-of-type 选择器来避免这类问题的发生。使用这两个选择器时，CSS 3 在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算了

h2:nth-of-type(odd) {
  background-color: yellow;
}
h2:nth-of-type(even) {
  background-color: skyblue;
}

另外，如果计算是奇数还是偶数时需要从下往上倒过来计算，则可以使用 nth-last-of-type 选择器来代替 nth-last-child 选择器，进行倒序计算

循环使用样式

语法：nth-child(an_b)，a 表示每次循环中共包括几种样式，b 表示指定的样式在循环中所处位置。如果时 4 中背景色作为一组循环，则可以用如下方法

li:nth-child(4n+1) {
  background-color: yellow;
}
li:nth-child(4n+2) {
  background-color: limegreen;
}
li:nth-child(4n+3) {
  background-color: red;
}
li:nth-child(4n+4) {
  background-color: white;
}

4n+4可以略写成4n

因此nth-child(odd)选择器和nth-child(even)选择器实际上都可以采用如下方式代替

<子元素>:nth-child(2n+1) {
  //指定样式
}
<子元素>:nth-child(2n+2) {
  //指定样式
}
<子元素>:nth-last-child(2n+1) {
  //指定样式
}
<子元素>:nth-last-child(2n+2) {
  //指定样式
}

only-child 选择器

采用如下所示的方法并结合运用 nth-child 选择器与 nth-last-child 选择器，则可指定当某个父元素中只有一个子元素时才使用的样式

1
2
3

<子元素>:nth-child(1):nth-last-child(1) {
  //指定样式
}

另外，还可以用only-child选择器来代替使用这种方法

另外，也可以使用only-of-type选择器来替代nth-of-type(1):nth-last-of-type(1)

UI 元素状态伪类选择器

选择符示例

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Selector Basics</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet'>
  <style>
    body {
      background-color: rgb(50,122,167);
      padding: 0 20px 20px 20px;
      margin: 0;
    }
    p {
      color: rgba(255,255,255,.6);
      font-size: 1em;
      font-family: "Varela Round", Arial, Helvetica, sans-serif;
    }
    h1, h2, h3 {
      color: rgb(255,255,255);
      font-family: Arial, "Palatino Linotype", Times, serif;
      border-bottom: 2px solid rgb(87,185,178);
      padding-top: 10px;
      padding-bottom: 5px;  
    }
    h1 {
      font-size: 2em;
    }
    #logo {
      font-family: Baskerville, Palatino, sans-serif;
      font-size: 2em;
      color: rgba(255,255,255,.8);
      font-style: italic;
      text-align: center;
      margin-bottom: 30px;
      background-color: rgb(191,91,116);
      border-radius: 0 0 10px 10px;
      padding: 10px;
    }
    .note {
      color: black;
      border: 2px solid white;
      background-color: rgb(69,189,102);
      margin-top: 25px;
      margin-bottom: 35px;
      padding: 20px;
    }
    .note strong {
      color: white;
    }
    article {
      max-width: 760px;
      margin: 0 auto;
    }
    h1+p {
      color: rgb(255,255,255);
      font-size: 1.2em;
      line-height: 140%;
    }
  </style>
</head>
<body>
  <article>
    <div id="logo">
      CSS: The Missing Manual
    </div>
    <h1>The Amazing World of CSS</h1>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p class="note"><strong>NOTE:</strong> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </p>
    <h2>Who Knew CSS Had Such Power?</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p class="note"><strong>NOTE:</strong> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </p>
    <h3>Not Me!</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <h3>Me Neither!</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </article>
</body>
</html>

选择器