CSS学习笔记（二）

三、 CSS选择器

在CSS语法部分，我们已经了解CSS规则由 选择器 和 声明 组成。如下所示：

1
2
3

选择器 {
  声明 ；
}

选择器 就是{ }之前的部分，它指明了{ }中的声明的作用对象，也就是声明作用于网页中的哪些元素。在CSS（主要是CSS2、CSS2.1，部分CSS3）中，选择器主要有以下： 元素选择器 、通配选择器 、类选择器 、ID选择器 、多类选择器 、属性选择器 、派生选择器 、伪类选择器 、伪元素选择器。

3.1 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

1
2
3

html {color: black;}
h1 {color: gray;}
h2 {color: silver;}

说明：
关于 元素选择器 和 标签选择器 ，这两个概念其实是一样的。在《CSS权威指南》这本书中讲到选择器时提到的是 “元素选择器” ；而在其他的资料中，讲到选择器，提到的是 “标签选择器” 。这是因为，CSS 依赖于元素，规则作用于元素，所以 CSS 中习惯称为 “元素选择器” 。而 CSS 样式作用的元素通常就是 HTML 文档的标签，所以，”元素选择器” 也常被称为 “标签选择器” 。

3.2 通配选择器

CSS2引入了一种新的简单的选择器，叫做通配选择器，显示为一个星号 (∗) 。通配选择器可以与任何元素匹配，就像是一个通配符，通配选择器后的声明将应用于文档中的所有元素。例如，下面的这条规则是将文档中的每一个元素都设置为红色：

1	* {color: red;}

注意：
考虑到通配选择器的特殊性，在使用的时候，我们要小心。

3.3 类选择器

区别与元素选择器，类选择器的使用不需要考虑具体涉及的元素，使用的时候只需要为那些要应用样式的元素的class属性指定一个恰当的值，这样，这些元素就会被归类到一起，之后要做的，就是为这些归类的元素应用样式。其语法是 .类选择器名称 {CSS代码;} ，如下所示,是为所有类名为 important 的元素设置了字体为红色、加粗：

.important {
  color: red;
  font-weight: bold;
}

上面的写法是常用的书写方式，类选择器忽略了通配选择器，完整的写法应该是：

*.important {
  color: red;
  font-weight: bold;
}

例如，如果有以下的元素，其class属性指定为important，那么，他们都会应用上述的CSS样式。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>类选择器示例</title>
<style type="text/css">
.important {
    color:red;
    font-weight: bold;
}
</style>
</head>
<body>
    <h1 class="important">通知</h1>
    <p>紧急通知，<span class="important">今天下午三点</span>，在<span class="important">南操场</span>举行消防演练。</p>
</body>
</html>

3.4 多类选择器

类选择器应用于元素的class属性值为单个词的情况，而在HTML中，元素的class值可能会被设定为多个词组成的一个词列表，每个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和强调（stress），就可以写作：

1
2
3

<p class="important stress">
  This paragraph is a very important stress.
</p>

提示：
需要注意的是，这两个词：重要（important）和强调（stress）的顺序无关紧要，写成 stress important 也可以。

下面我们举个例子来详细的说明多类选择器的使用：假设class属性为important的类，其所有的元素都是红色、粗体；而class属性为warning的类，其所有的元素都是斜体、下划线；class属性同时设置为important和warning的类，其背景为银色。具体的表现如下所示：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>多类选择器示例</title>
<style type="text/css">
.important {
    color:red;
    font-weight: bold;
}
.stress {
  font-style: italic;
  text-decoration: underline;
}
.important.stress {
  background: silver;
}
</style>
</head>
<body>
    <h1 class="important stress">勇气</h1>
    <p>三年级时，我还是一个<span class="important">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时，我们班上了一节公开课，老师提出了<span class="stress">一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"</span> 我环顾了四周，就我没有举手。</p>
</body>
</html>

提示：
通过把两个类选择器链接在一起，仅可以应用到同时包含这些类名的元素（类名的顺序不限）。

也就是说，如上面的代码中那样，将important和stress两个选择器链接在一起，形成多类选择器 .important.stress {background: silver;} ，则只有某个元素的class属性的值同时包含important和stress时，多类选择器中的样式才会被应用。

注意：
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。就像下面的这种情况：
1
2
3
p.important.stress {
  background: silver;
}

上面的选择器将只匹配class属性同时包含 important 和 stress 的那些p元素。因此，如果一个p元素的 class 属性是 important 和 warning，将不能匹配。

匹配的条件 同时包含 是指多类选择器中的多个类要被某一个要应用样式的元素的class属性同时包含。比如，元素要应用 .important.stress {background: silver;} ，则其class属性的值至少要包含 important 和 stress。如下所示的元素也能匹配 .important.stress {background: silver;} 多类选择器中的样式：
1
2
3
<p class="important stress warning">
According to the weather forecast, there will be a storm tomorrow.
</p>

3.5 ID选择器

ID选择器和类选择器很类似，他们有着以下的差别：

ID选择器前面有一个#号 ——— 也称为棋盘号而不是点号。如下所示，这个规则会让id属性为font的所有元素显示为粗体、sans-serif 字体的文本：
1
2
3
4
*#font {
font-weight: bold;
font-family: sans-serif;
}

说明：
与类选择器一样,ID选择器中的通配选择器通常是被忽略的，所以通常的写法都如下所示：
1
2
3
4
#font {
  font-weight: bold;
  font-family: sans-serif;
}

ID选择器不引用class属性的值，对比于类选择器，毫无疑问，它要引用id属性中的值。如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>ID选择器示例</title>
    <style type="text/css">
      #font {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 id="font">My maxim</h1>
    <p>Ba all you can be!</p>
  </body>
</html>

类选择器和ID选择器的区别：

相同点：可以应用到任何元素。

不同点：

在一个HTML文档中，ID选择器仅允许使用一次；而类选择器可以使用多次。
ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表；而类选择器class属性可以通过词列表为一个元素同时设置多个样式。
ID能包含更多含义。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：
1
2
3
4
#mostImportant {
color:red;
background:yellow;
}

注意：
类选择器和ID选择器可能是区分大小写的，这取决于文档语言。HTML和XHTML将类和ID值定义为区分大小写，所以类和ID的大小写必须与文档中的相应值匹配。因此，下面元素中的元素h1不会变成粗体：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>ID选择器示例</title>
    <style type="text/css">
      #font {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 id="Font">My maxim</h1>
    <p>Ba all you can be!</p>
  </body>
</html>

由于字母 f 的大小写不同，所以选择器不会匹配上面的元素。

3.6 属性选择器

对于类选择器和ID选择器，在使用的时候，我们只是设置适当的属性值。因为，这些属性是某些标记语言（例如HTML、SVG、MathML）的元素本来就具备的。可能在其他标记语言中，这些类和ID选择器就不能使用了。所以，CSS2引入属性选择器，这样，我们就可以通过自定义元素属性并为其设置值来选择元素，而不仅限于class 和 id 属性。CSS 共有4种类型的属性选择器，分别是 简单属性选择器 、具体属性选择器 、部分属性选择器 、特定属性选择器。

3.6.1 根据简单属性选择

如果只考虑选择有某个属性的元素，而不论该属性的值是什么，可以使用简单选择器。例如，要选择有title属性（值不限）的所有p元素，可以写作：

1
2
3

h1[title] {
  color: silver;
}

根据简单属性选择的例子还有很多，例如可以只对有href属性的锚（a元素）应用样式：

1
2
3

a[href] {
  color: red;
}

此外，还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设为粗体，可以这样写：

1
2
3

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

还可以采用一些创造性的方法使用这个特性。例如，可以对所有带 alt 属性的图像应用某种样式，从而判断图像是否有效：

1
2
3

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

3.6.2 根据具体属性值选择

相比于简单选择器的对象是某些属性整体，具体属性选择器进一步缩小选择范围，只选择有特定属性值的元素，使得元素的选择更加具体。例如，上面的例子我们针对所有带 alt 属性的图像应用了某种样式，现在我们具体到只对 alt="动漫" 的图片应用样式，判断这类的图像是否有效：

1
2
3

img[alt="动漫"] {
  border: 3px solid red;
}

同样，跟简单属性选择器一样，我们可以把多个属性-值选择器链接在一起来选择一个文档。例如，为了将 title="音乐" 且 href="http://music.163.com/" 的所以 HTML 超链接的文本加粗并设为红色，可以这样写：

a[href="http://music.163.com/"][title="音乐"] {
  font-weight: bold;
  color: red;
}

注意：
在使用具体属性选择器时，一定要注意 属性与属性值必须完全匹配 。尤其要注意属性值包含空格的值列表，这种情况下的匹配很容易出问题。例如：
1
<a type="audio music" href="http://music.163.com/">网易云音乐</a>

要根据具体属性正确地匹配上面这个元素，唯一的写法是：

a[type="audio music"] {
font-weight: bold;
color: red;
}

3.6.3 根据部分属性值选择

如果属性能接受词列表，可以根据其中的任意一个词进行选择。也就是说，对于属性包含多个词的元素，使用部分选择器可以根据其中的某个词来进行选择。例如，我们想选择 class 属性包含 coding 的 p 元素，就可以用部分属性选择器做到：

1
2
3

p[class~="coding"] {
  font-weight: bold;
}

上面的样式就可以使 class 属性包含 coding 的 p 元素的文本为粗体，这些 p 元素可以是：

1
2
3

<p class="coding java">I love Java</p>
<p class="coding css"class>I use CSS</p>
<p class="student coding vue">Vue is useful</p>

注意：
使用部分选择器必须注意不要忽略波浪号（~）。如果忽略，则说明需要完成完全值匹配。

在某些情况下，部分属性选择器等价于我们在类选择器中讨论过的点号类名记法。也就是说， p.coding 和 p[class="coding"] 应用于 HTML 时是等价的。

子串匹配属性选择器

部分属性选择器还有一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为 “子串匹配属性选择器” 。下表是对这些选择器的简单总结：

例如，如果希望对指向 music.163 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

1
2
3

a[href*="music.163.com"] {
  color: red;
}

3.6.4 特定属性选择类型

特定属性选择器的使用如下所示：

1
2
3

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

上面的规则会选择 lang 属性等于 en 或者以 en- 开头的所有元素。也就是说属性[att|=value]的(比如 ·lang=”en-us”)含义就是：匹配值为“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”的 att 属性。

3.7 派生选择器

CSS语法中通过依据元素在其位置的上下文关系来定义样式，这样可以使标记更加简洁。在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器，这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。CSS 中，派生选择器包括： 后代选择器 、子元素选择器 、相邻兄弟选择器。

3.7.1 后代选择器

后代选择器，其语法：规则左边的选择器由两个或多个用空格分隔的元素组成。并且，这些元素之间是有继承关系的，一般越靠左的元素在继承树中越是 辈份 高。后代选择器，也就是将规则作用于某元素的后代元素。例如:

1
2
3

h1 em {
  color: gray;
}

上面的规则会将 h1 元素后代的 em 元素的文本变成灰色。

注意：
关于后代选择器，构成后代关系的两个元素之间的层次间隔可以是无限的。例如, ul em , 这个选择器会将规则应用于从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。如下所示：

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

3.7.2 子元素选择器

与后代选择器不同，子元素选择器只能选择作为某元素子元素的元素。也就是说，后代选择器将规则作用于父类元素的后代，这个后代可以是直接的子元素，也可以是隔代的元素；而子元素选择器是将规则作用于父类元素直接的子元素。例如：

1
2
3

h1 > strong {
color:red;
}

可以看出，子元素选择器是在两个元素之间使用了子结合符，即大于号（>）。子结合符两边可以有空白符，因此，h1 > strong 、h1> strong 和 h1>strong 都是一样的。

为了详细说明子元素选择器的使用，举个例子。下面的两个 h1 元素都有嵌套了 <strong> ，但只有第一个 h1 元素中的 <strong> 样式作用成功了，而第二个 h1 中的 <strong> 不受影响。这是因为第一个 h1 元素中的 strong 是 h1 的直接子类,而第二个 h1 中的 <strong> 是 <em> 直接的子元素，是 h1 的后代。

1 2	<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>

3.7.3 相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。例如,如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

1
2
3

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

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符。与子结合符一样，相邻兄弟结合符旁边可以有空白符。

注意：
使用相邻兄弟选择器时要注意，用一个结合符只能选择两个相邻兄弟中的第二个元素。因为在定义中，使用相邻选择器是 选择紧接在另一个元素后的元素 且 二者有相同的父元素。例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
li + li {
font-weight:bold;
}
```  
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。  
```HTML
<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>

3.8 伪类选择器

在解释伪类选择器之前，我们先来弄清楚 伪类 和 伪元素。

伪类 ：表示一些元素的动态状态，用于向某些选择器添加特殊的效果，典型的就是链接的各个状态(LVHA)。
伪元素 ：用于将特殊的效果添加到某些选择器，代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

CSS中常用的伪类如下所示（包括CSS、CSS2）：

使用伪类选择器的语法是：

1
2
3

selector : pseudo-class {
  property: value;
}

与CSS类结合使用的语法是：

1
2
3

selector.class : pseudo-class {
  property: value;
}

CSS 中最常用的伪类是锚伪类，它可以分为 链接伪类 、动态伪类。

链接伪类：

1 2	a:link {color: #FF0000;} /* 未访问的链接 / a:visited {color: #00FF00;} / 已访问的链接 */

动态伪类：根据用户行为改变文档的外观，可以应用到任何元素。

1 2	a:hover {color: #FF00FF;} /* 鼠标移动到链接上 / a:active {color: #0000FF;} / 选定的链接 */

提示：
在CSS中，伪类的使用是有顺序的。一般建议按 link-visited-hover-active (LVHA) 的顺序声明。

在 CSS2.1 中，还定义了 :focus 、:first-child 、:lang()：

:focus ：指示当前拥有输入焦点的元素。例如，下面的规则可以突出显示一个准备接受键盘输入的表单元素。
1
2
3
4
input:focus {
background: silver;
font-weight: bold;
}

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

上面的 HTML 文件，作为第一个子元素的元素包括第一个 p 、第一个 li 和 strong 及 em 元素。给定一下规则：

p:first-child {
  font-weight: bold;
}
li:first-child {
  text-transform: uppercase;
}

其最终的效果是：

:lang() ：:lang() 伪类就像是 |= 属性选择器，可以为不同的语言定义特殊的规则。例如，把所有的法语元素变成斜体，可以写作：
1
2
3
*:lang(fr) {
font-style: italic;
}

3.9 伪元素选择器

CSS中常用的伪元素如下所示（包括CSS、CSS2）：

与伪类的语法一样，使用伪元素选择器的语法是：

1
2
3

selector : pseudo-element {
  property: value;
}

与CSS类结合使用的语法是：

1
2
3

selector.class : pseudo-element {
  property: value;
}

CSS2.1中的定义了4个常用的伪元素：:first-line 、:first-letter 、:before 、:after。

:first-line ：可以用来影响元素中第一个文本行。例如，可以让文档中第一段的第一行变成粉色：
1
2
3
p::first-line {
}
:first-letter ：用于设置一个块级元素首字母的样式，而且仅对该字母设置样式。例如，下面的规则会把每一段的第一个字母变成红色：
1
2
3
p::first-letter {
color: red;
}
:before :可以在元素的内容前面插入新内容。例如，在每个 h1 元素前面插入一幅图片：
1
2
3
h1:before {
content:url(logo.gif);
}
:after ：可以在元素的内容之后插入新内容。例如，在文档的最后用一个适当的结束语结束：
1
2
3
body:after {
content:" The End.";
}

注意：

可以应用到伪元素 :first-line 和 :first-letter 的属性是有限制的。

所有伪元素都必须放在出现该伪元素的选择器的最后面。