css基础选择器教程,CSS 选择器

CSS 选择器

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

什么是选择器

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

通用选择器

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

示例* {

margin: 0;

padding: 0;

}测试看看‹/›

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

注意：不建议*在生产环境中使用通用选择器，因为此选择器会匹配页面上的每个元素，这会对浏览器造成不必要的压力。

元素类型选择器

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

示例p {

color: blue;

}测试看看‹/›

p选择器中的样式规则将应用于

文档中的每个元素，并使其颜色为蓝色，无论它们在文档树中的位置如何。

ID选择器

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

ID选择器的定义是一个井号(#)，后跟ID值。

示例#error {

color: red;}测试看看‹/›

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

class类选择器

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

用一个句号(.)紧随其后的类值定义类选择器。

示例.blue {

color: blue;

}测试看看‹/›

以上样式规则将class属性中设置为的文档中每个元素的文本显示为蓝色blue。您可以使其更加具体。例如：

示例p.blue {

color: blue;

}测试看看‹/›

选择器中的样式规则p.blue仅

将class属性设置为的那些元素呈现为蓝色blue，而对其他段落没有影响。

后代选择器

当需要选择一个元素是另一个元素的后代时，可以使用这些选择器。例如，如果您只想定位无序列表中包含的那些定位点，而不要定位所有定位点元素。

示例ul.menu li a {

text-decoration: none;

}

h1 em {

color: green;

}测试看看‹/›

选择器内的样式规则ul.menu li a仅适用于包含在具有class 的无序列表内的那些即锚元素.menu，并且对文档内的其他链接没有影响。同样，h1 em选择器内的样式规则仅适用于heading内包含的元素

。

子选择器

子选择器只能用于选择作为某些元素的直接子元素的那些元素。子选择器由两个或多个选择器组成，两个选择器之间用大于号(即>)隔开。例如，您可以使用这些选择器在具有多个级别的嵌套列表中选择列表元素的第一级。

示例ul > li {

list-style: square;

}

ul > li ol {

list-style: none;

}测试看看‹/›

选择器内的样式规则ul > li仅适用于

作为

• 元素直接子元素的那些元素，并且对其他列表元素没有影响。

相邻兄弟选择器

相邻的同级选择器可用于选择同级元素。该选择器的语法类似于：E1 + E2，其中E2是选择器的目标。

h1 + p以下示例中的选择器

仅在

和

元素在文档树中共享同一父级并且

紧接在该

元素之前的情况下才选择元素。这意味着只有每个

标题之后的段落才   具有关联的样式规则。

示例h1 + p {

color: blue;

font-size: 18px;

}

ul.task + p {

color: #f0f;

text-indent: 30px;

}测试看看‹/›

通用兄弟选择器

通用的同级选择器与相邻的同级选择器(E1 + E2)类似，但不太严格。通用的同级选择器由两个简单的选择器组成，这些选择器由波浪号(∼)字符分隔。可以这样写：E1〜E2，其中E2是选择器的目标。

下例中的选择器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;}测试看看‹/›