css选择器介绍和用法 – CSS教程

上一章CSS教程请查看：css基本语法和用法

CSS选择器是匹配HTML文档中的元素的模式，关联的样式规则应用于匹配选择器模式的元素。

选择器是什么

选择器是CSS最重要的方面之一，因为它们用于选择web页面上的元素，以便对其进行样式设置，可以用多种方式定义选择器。

通用选择器

通用选择器，写为*即星号或星号，匹配页面上的每个元素。如果目标元素上存在其他条件，则可以省略通用选择器。这个选择器通常用于从元素中删除默认的边距和填充，以便进行快速测试。

* {
    margin: 0;
    padding: 0;
}

选择器中的样式规则将应用于文档中的每个元素。

注意：不建议在生产环境中使用全局选择器*，因为这个选择器匹配页面上的每个元素，这会给浏览器带来太多不必要的压力。

元素类型选择器

元素类型选择器将文档树中元素的每个实例与相应的元素类型名称匹配。

p {
    color: blue;
}

p选择器中的样式规则将应用于文档中的每个<p>元素，并将其涂成蓝色，而不考虑它们在文档树中的位置。

Id选择器

id选择器用于定义单个或惟一元素的样式规则。

id选择器是用一个散列符号(#)紧接id值定义的。

#error {
    color: red;
}

此样式规则将元素的文本呈现为红色，其id属性设置为error。

类选择符

类选择器可用于选择任何具有类属性的HTML元素，拥有该类的所有元素都将根据定义的规则进行格式化。

类选择器是用紧跟在类值后面的句点符号(.)定义的。

.blue {
    color: blue;
}

上面的样式规则以蓝色呈现文档中每个将class属性设置为蓝色的元素的文本。你可以让它更具体一点，例如：

p.blue {
    color: blue;
}

选择器p中的样式规则。blue只将class属性设置为蓝色的<p>元素的文本呈现为蓝色，对其他段落没有影响。

后代选择器

当需要选择另一个元素的后代元素时，可以使用这些选择器。例如，如果你希望仅以无序列表中包含的那些锚为目标，而不是以所有锚元素为目标。

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

选择器ul中的样式规则。菜单li a只适用于那些<a>，也就是包含在一个无序列表中的锚元素，该列表中包含类.menu，对文档中的其他链接没有影响。类似地，h1 em选择器内的样式规则仅适用于标题<h1>内包含的<em>元素。

子选择器

子选择器可用于只选择某些元素的直接子元素。子选择器由两个或多个选择器组成，它们之间用大于号分隔(例如>)。例如，你可以使用这些选择器来选择具有多个级别的嵌套列表中的第一级列表元素。

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

选择器ul> li中的样式规则只适用于<ul>元素的直接子元素<li>元素，对其他列表元素没有影响。

相邻选择符

相邻的兄弟选择器可用于选择兄弟元素。这个选择器的语法如下:E1 + E2，其中E2是选择器的目标。

以下示例中的选择器h1 + p将仅在<h1>和<p>元素在文档树中共享同一父元素且<h1>紧跟在<p>元素之前的情况下选择<p>元素。这意味着只有紧跟在每个<h1>标题之后的段落才有相关的样式规则。

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

同级选择器

一般的同级选择器类似于相邻的同级选择器(E1 + E2)，但是没有那么严格。一般的兄弟选择器由两个简单的选择器组成，中间用波浪(∼)字符分隔。它可以写成这样:E1∼E2，其中E2是选择器的目标。

下面示例中的选择器h1∼p将选择所有在<h1>元素之前的<p>元素，其中所有元素在文档树中共享相同的父元素。

h1 ∼ p {
    color: blue;
    font-size: 18px;
}
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
}

还有更多的选择器，比如属性选择器、伪类和伪元素。我们将在接下来的章节中讨论这些选择器。

分组选择器

通常，样式表中的多个选择器共享相同的样式规则声明。可以将它们分组到逗号分隔的列表中，以最小化样式表中的代码。它还可以防止你一次又一次地重复相同的样式规则。

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

正如你在上面的例子中所看到的，相同的样式规则font-weight: normal;由选择器h1、h2和h3共享。所以，它可以被分组在一个逗号分隔的列表中，就像这样：

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}