【HTML+CSS】3.CSS选择器

css样式表乍一看挺简单的，但是你随便下载一个实例，哇，这都啥啊，点点划划的看不懂……还是继续学习吧！前面说过了，CSS 语法规则就是：选择器+声明。那我们就首先看看有哪些选择器吧。

---

目录

1 标签选择器

2 类选择器

3 id选择器

4 属性选择器

4.1 [attribute]

4.2 [attribute=value]

4.3 [attribute~=value]

4.4 [attribute |= language]

4.5 其他

5 后代选择器

6 子元素选择器

7 相邻兄弟选择器

8 伪类 (Pseudo-classes)

9 伪元素 (Pseudo-elements)

---

1 标签选择器

标签选择器也称为元素选择器，是指直接使用HTML标签作为选择器名称。

html {background-color: black;} /*整个文档添加黑色背景*/

p {font-size: 30px; backgroud-color: gray;} /*所有段落文档字体大小设为30px并添加灰色背景*/

h2 {background-color: red;} /*对文档所有h2标题添加红色背景*/

也可以同时对多个HTML元素进行声明，这种选择器也叫做”分组选择器“：

h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}

如果想选取所有的元素，可以使用通配符 * ，表示该选择器可以与任何元素匹配：

* { font-size: 20px;} /*所有元素的字号都为20px,对于不含该属性的元素则无效*/

2 类选择器

我们现在每天看到各种各样的网页，不难发现，通过标签定义样式实在是太粗糙了。对于同一种HTML元素，我们也有不同的要求，比如为了突出或者为了美观。这个时候，我们可以考虑使用类选择器(class selector)。

要使用类选择器我们需要首先对HTML文件中的元素添加class属性，比如我们想强调和截止日期有关的内容，就可以对相关的内容设置类：

<p class="deadline">...</p>

<h2 class="deadline">...</h2>

之后，在对应的样式表中设定样式：

p.deadline { color: red;}

h2.deadline { color: red;}

点号”.”加上类名就组成了一个类选择器。注意：类选择器定义时，名称不能以数字开头。

如果我们省略.deadline前面的元素名，就相当于统一选中了所有包含该类的元素：

.deadline { color: red;}

通常情况下，我们会组合使用以上2者得到更加有趣的样式，这也就是”嵌套选择器“：

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

上面的例子效果如下，刚开始看有些绕，多试试吧：

• p{ }: 为所有 p 元素指定一个样式。
• .marked{ }: 为所有 class="marked" 的元素指定一个样式。
• .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
• p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

需要注意的是，一个元素可以同时包含多个class。比如我们在css文件中定义两个类：

.warning { color: red;}

.important { font-weight: bold;}

对于HTML中的元素，可以同时包含这两个类的性质，各个类名之间用空格隔开，且与顺序无关：

<p class="warning important">...</p>
<p class="important warning">...</p>

有时候，两种类的叠加效果可能不大好，比如字的颜色和背景颜色不匹配啊之类的，那么我们还可以重新写这样的”复合属性“：

.warning { color: red;}

.important { font-weight: bold;}

.warning.important { font-style: italic;}
.important.warning { font-style: italic;}

对于上面这样的代码，可以这样解释：带有warning属性的元素字体为红色，带有important属性的元素字体会加粗，而同时具有warning和important的文字，会加粗（important属性）、字体为红色（warning属性）并添加变成斜体（important和warning属性同时存在）。后两行代码是等效的，也就是说设置多个属性的类也和词序没有关系。

同样的，也可以在前面加上元素名，匹配包含指定类名的指定元素，譬如 p.warning.important {}。

另外，如果我们再做如下的定义：

.important.urgent {background:silver;}

这个选择器将只匹配 class 属性中包含词 important 和 urgent 的元素。所以之前提到的只有important、warning属性的元素，使不能匹配的，但是它可以匹配以下元素：

<p class="important urgent warning">...</p>

3 id选择器

ID选择器和类选择器有些类似，id选择器使用自定义名称，以 # 号作为前缀，在HTML中通过标签的id属性进行名称匹配。

比如，在HTML中，我们可以给某个元素指定一个id：

<div id="page">...</div>

在CSS定义样式：

#page {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

id属性和class属性的差别十分显著：

• 一个元素只能拥有一个唯一的ID属性，但是可以拥有多个class属性（再强调一下：空格分割，顺序无关）。
• 一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。

我感觉，id属性比较适合特殊的元素，没有特殊需求的时候，为了重用和命名方便，使用class属性是比较好的。

还有一个值得注意的地方：

类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。

4 属性选择器

属性选择器，是指为拥有指定属性的HTML元素设置样式。

看教程的时候有一个说明，帖上来：

只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

4.1 [attribute]

属性选择器，如下所示，表示选择所有带有title属性的元素：

[title]{color:red;}

可以指定具有属性的元素种类，下面的例子表示将选择带有href属性的HTML 超链接的文本设置为红色：

a[href] {color:red;}

这个例子表示修改所有带有 alt 属性的图像的border样式，常用来突出显示图像：

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

也可以同时指定多个属性，下面的例子表示将选择同时带有href属性和title属性的HTML 超链接的文本设置为红色：：

a[href][title] {color:red;}

4.2 [attribute=value]

属性和值选择器，当属性与属性值必须完全匹配时应用样式。如下所示，表示选择所有 title 属性为 flower 的元素：

[title=flower]{border:5px solid blue;}

 下面这个例子表示将指向某个指定文档的超链接变成红色：

a[href="https://blog.csdn.net/qq_45427038"] {color: red;}

也可以同时使用多个属性-值选择器：

<a href="https://blog.csdn.net/qq_45427038" title="M&Q">小仙女的博客</a>

4.3 [attribute~=value]

下面的例子为包含指定值的 title 属性的所有元素设置样式，适用于由空格分隔的属性值：

[title~=flower]{border:5px solid blue;}

这里有一个比较好的例子，可以直观的看一下：

4.4 [attribute |= language]

这是一种适用于由连字符分割的属性值的选择器，下面的例子表示lang属性以 en 为开头的所有元素：

[lang|=en] { color:red; }

4.5 其他

属性选择器还有一些用法，就随便列一下，不展开说了：

再提一下，属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

5 后代选择器

后代选择器（descendant selector）又称为包含选择器，可以选择作为某元素后代的元素。我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

比如，下面这个例子，就是只对 h1 元素中的 em 元素应用样式，而不会影响其他地方的 em 元素：

h1 em {color:red;}

tips:

• 需要注意选择器的解读顺序！！
• 后代选择器中，两个元素之间的层次间隔可以是无限的！！！

6 子元素选择器

和后代选择器相反，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

子选择器使用了大于号 >（子结合符），选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

子选择器也可以和后代选择器结合起来，但是我觉得这样太复杂了，就不多说了，有兴趣的自己看吧。

7 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。相邻兄弟选择器使用加号（+）表示，即相邻兄弟结合符（Adjacent sibling combinator）。

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

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

这种表示方法只对h1后的段落有效，而不影响其他地方的段落。

8 伪类 (Pseudo-classes)

CSS 伪类用于向某些选择器添加特殊的效果，也就是根据不同的状态来显示不同的样式。伪类的语法如下：

selector : pseudo-class {property: value}

举个例子，默认的超链接为蓝色，带下划线，可以设置伪类更改其不同状态下的样式：

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

还有其他内容，在这里就不展开了，用到的时候再补充吧：

9 伪元素 (Pseudo-elements)

伪元素用于向某些选择器设置特殊效果，它的语法为：

selector:pseudo-element {property:value;}