From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../learn/css/building_blocks/selectors/index.html | 228 +++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 files/zh-cn/learn/css/building_blocks/selectors/index.html (limited to 'files/zh-cn/learn/css/building_blocks/selectors/index.html') diff --git a/files/zh-cn/learn/css/building_blocks/selectors/index.html b/files/zh-cn/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..cbc655cf38 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,228 @@ +--- +title: CSS选择器 +slug: Learn/CSS/Building_blocks/Selectors +tags: + - CSS + - CSS选择器 + - 初学者 + - 类 +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
 {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

{{Glossary("CSS")}}中，选择器用来指定网页上我们想要样式化的{{glossary("HTML")}}元素。有CSS选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。本文和本文的子篇中，我们将会详细地讲授选择器的不同使用方式，并了解它们的工作原理。

+ + + + + + + + + + + + +
学习前提：计算机的基本知识， 安装了基础软件，处理文件的基本知识，HTML基础（学习HTML介绍）以及对CSS工作方式的了解（学习CSS初步）
目标：详细学习CSS选择器的工作方式。
+ +

选择器是什么？

+ +

你也许已经见过选择器了。CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

+ +

Some code with the h1 highlighted.

+ +

前面的文章中，你也许已经遇到过几种不同的选择器，了解到选择器可以以不同的方式选择元素，比如选择诸如h1的元素，或者是根据class (类) 选择例如.special。

+ +

CSS中，选择器由CSS选择器规范加以定义。就像是CSS的其他部分那样，它们需要浏览器的支持才能工作。你会遇到的大多数选择器都是在CSS 3中定义的，这是一个成熟的规范，因此你会发现浏览器对这些选择器有良好的支持。

+ +

选择器列表

+ +

如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的h1和.special类有相同的CSS，那么我可以把它们写成两个分开的规则。

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

我也可以将它们组合起来，在它们之间加上一个逗号，变为选择器列表。

+ +
h1, .special {
+  color: blue;
+}
+ +

空格可以在逗号前或后，你可能还会发现如果每个选择器都另起一行，会更好读些。

+ +
h1,
+.special {
+  color: blue;
+}
+ +

在下面的实时示例中，试着把两个有ID声明的选择器组合起来。外观在组合起来以后应该还是一样的。

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。

+ +

在下面的示例中，无效的class选择器会被忽略，而h1选择器仍会被样式化。

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

但是在被组合起来以后，整个规则都会失效，无论是h1还是这个class都不会被样式化。

+ +
h1, ..special {
+  color: blue;
+}
+ +

选择器的种类

+ +

有几组不同的选择器，知道了需要哪种选择器，你会更容易正确使用它们。在本文的子篇中，我们将会来更详细地看下不同种类的选择器。

+ +

类型、类和ID选择器

+ +

这个选择器组，第一个是指向了所有HTML元素<h1>。

+ +
h1 { }
+ +

它也包含了一个class的选择器：

+ +
.box { }
+ +

亦或，一个id选择器：

+ +
#unique { }
+ +

标签属性选择器

+ +

这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：

+ +
a[title] { }
+ +

或者根据一个有特定值的标签属性是否存在来选择：

+ +
a[href="https://example.com"] { }
+ +

伪类与伪元素

+ +

这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：

+ +
a:hover { }
+ +

它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。

+ +
p::first-line { }
+ +

运算符

+ +

最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（>）选择了<article>元素的初代子元素。

+ +
article > p { }
+ +

接下来要做的事情

+ +

你可以看下下面的选择器参考表，可以获得到这个学习章节——或者总体来说是MDN上——的各种选择器的直接链接；你也可以继续下去，开始你的了解类型、类和ID选择器的旅程。

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

选择器参考表

+ +

下面的表格让你可以浏览你可以用的选择器，还有本指南中教你如何使用每种选择器的页面的链接。我还加上了一个能查看浏览器对每个选择器的支持信息的MDN页面链接。你可以把这个作为回头的参考，在你以后需要查询文献中提到的选择器的时候，或者是在你广义上实验CSS的时候。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
选择器示例学习CSS的教程
类型选择器h1 {  }类型选择器
通配选择器* {  }通配选择器
类选择器.box {  }类选择器
ID选择器#unique { }ID选择器
标签属性选择器a[title] {  }标签属性选择器
伪类选择器p:first-child { }伪类
伪元素选择器p::first-line { }伪元素
后代选择器article p后代运算符
子代选择器article > p子代选择器
相邻兄弟选择器h1 + p相邻兄弟
通用兄弟选择器h1 ~ p通用兄弟
+ +

模块目录

+ +
    +
  1. 层叠与继承
    2. +
  2. CSS选择器 + +
    3. +
  3. 盒模型
    4. +
  4. 背景与边框
    5. +
  5. 处理不同文字方向的文本
    6. +
  6. 溢出的内容
    7. +
  7. 值和单位
    8. +
  8. 在CSS中调整大小
    9. +
  9. 图像、媒体和表单元素
    10. +
  10. 样式化表格
    11. +
  11. 调试CSS
    12. +
  12. 组织CSS
    13. +
-- cgit v1.2.3-54-g00ecf