From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../guide/css/getting_started/selectors/index.html | 413 +++++++++++++++++++++ 1 file changed, 413 insertions(+) create mode 100644 files/zh-cn/web/guide/css/getting_started/selectors/index.html (limited to 'files/zh-cn/web/guide/css/getting_started/selectors/index.html') diff --git a/files/zh-cn/web/guide/css/getting_started/selectors/index.html b/files/zh-cn/web/guide/css/getting_started/selectors/index.html new file mode 100644 index 0000000000..51f8693438 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/selectors/index.html @@ -0,0 +1,413 @@ +--- +title: 选择器 +slug: Web/Guide/CSS/Getting_started/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承")}}这是 CSS入门教程 的第五节; 本节将讲述如何应用样式；不同的选择器有不同的优先级；你在样例文档中为标签增加一些属性，在样式中使用这些属性。

+ +

资料: 选择器（Selectors）

+ +

CSS有一套用于描述其语言的术语。在前面的教程中，你应该已经写过这个样式：

+ +
strong {
+  color: red;
+}
+
+ +

在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器strong开始，它选择要在DOM中哪些元素上使用这条规则。

+ +
+
更多细节
+ +

花括号中的部分称为声明（declaration）

+ +

关键字color是一个属性, red 是其对应的值.

+ +

同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.

+ +

这个教程中将类似strong的选择器称为标签选择器（tag selector）.CSS规范中称之为类型选择器（type selector）.

+
+ +

本节将介绍更多的选择器。

+ +

除了标签名称，你还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则.

+ +

其中 class 和 id 两个属性具有比较重要的地位。

+ +

类选择器（Class selectors）

+ +

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。

+ +

在写样式表时，类选择器是以英文句号（.）开头的。

+ +

ID选择器（ID selectors）

+ +

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

+ +

在写样式表时，ID选择器是以#开头的。

+ +
+
例：
+下面的p标签同时具有 class 属性和id 属性: + +
<p class="key" id="principal">
+
+ +

id 属性值 principal必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 class 属性值 key.

+ +

在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是 {{ HTMLElement("p") }} 元素。）

+ +
.key {
+  color: green;
+}
+
+ +

下面的规则将使 id 等于 principal 的那个元素的文字变为粗体:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

+ +
+
更多细节
+ +

你也可以将多个选择器组合起来构成更确定的选择器。

+ +

比如，选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的{{ HTMLElement("p") }} 元素。

+ +

除了class 和 id，你还可以用方括号的形式指定其他属性。比如，选择器 [type='button'] 选中所有 type 属性为 button 的元素。

+
+ +

如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。

+ +

如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。

+ +

伪类选择器（Pseudo-classes selectors）

+ +

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，{{ Cssxref(":hover") }} 会在鼠标悬停在选中元素上时应用相应的样式。

+ +

伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 ({{ cssxref(":visited") }})， 内容状态(如 {{ cssxref(":checked") }} ), 鼠标位置 (如{{ cssxref(":hover") }}). 完整列表参见 CSS3 Selectors working spec.

+ +
+
语法
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

伪类列表

+ + + +

资料: 基于关系的选择器

+ +

CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
常见的基于关系的选择器
选择器选择的元素
A E元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
A > E元素A的任一子元素E(也就是直系后代)
E:first-child任一是其父母结点的第一个子节点的元素E
B + E元素B的任一下一个兄弟元素E
B ~ EB元素后面的拥有共同父元素的兄弟元素E
+ +

你可以任意组合以表达更复杂的关系。

+ +

你还可以使用星号（*）来表示”任意元素“。

+ +
+
例
+ +

一个HTML表格有id 属性，但是它的行和单元格没有单独的id:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

下面的规则使表格每行的第一个单元格字体为粗体，使第二个单元格使用等宽字体。这条规则只影响id为data-table-1的表格:

+ +
    #data-table-1 td:first-child {font-weight: bolder;}
+    #data-table-1 td:first-child + td {font-family: monospace;}
+
+ +

最终效果:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
更多细节
+ +

一般情况下，如果你提高了某个选择器的的确定度，你便提高它的优先级。

+ +

使用这个技巧，可以避免为大量标签指定 class 或 id 属性。CSS（引擎）会帮你做的。

+ +

在复杂设计中速度非常重要，避免使用复杂的依赖元素关系的规则可以使你的样式更有效率。

+ +

更多关于表格的例子，见 Tables。

+
+ +

实例: 使用类选择器和ID选择器

+ +
    +
  1. 创建一个HTML文件
    2. +
  2. 将下面内容拷贝到HTML文件中 + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. 创建style1.css: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. 保存文件，在浏览器中查看效果: + + + + + + + + + +
    Cascading Style Sheets //此处应为斜体
    Cascading Style Sheets
    + +

    重新组织样式中规则的顺序，你会发现改变这几条规则的顺序不会影响最终效果。

    + +

    类选择器 .carrot 和.spinach 比标签选择器 strong 拥有更高优先级。

    + +

    ID 选择器 #first 比类选择器和标签选择器更优先。

    +
    5. +
+ +
+
挑战
+ +
    +
  1. 不改变HTML内容, 增加一条规则，不改变首字母颜色，将第二个p标签中的其他文字变成蓝色: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. 现在改变上面增加的那条规则（不改变其他任何内容）让第一个p标签中的其他文字也变成蓝色: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Possible solution
+ +
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+Hide solution
+See a solution for the challenge.
+ +

实例: 使用伪类选择器

+ +
    +
  1. 创建如下 HTML: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. 编辑CSS: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. 保存文件用浏览器查看HTML文件 (将鼠标放到链接上查看效果): + + + + + + +
    Go to our Home page  
    +
    4. +
+ +

实例: 使用基于关系的选择器和伪类选择器

+ +

通过使用基于关系的选择器和伪类选择器，你可以构造出复杂的叠加算法。这是一个常用的技巧，比如可以用来创建纯CSS无JavaScript的下拉菜单（pure-CSS dropdown menus）。关键点就是创建下面这类规则：

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

然后将这些规则应用到下面的HTML结构中：

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

学习实例 CSS-based dropdown menu example.

+ +

接下来是什么?

+ +

你的样式表变得多而复杂。下面章节将讲述如何让样式表更 易读.{{nextPage("/zh-CN/docs/CSS/开始/Readable_CSS", "易读的 CSS")}}

-- cgit v1.2.3-54-g00ecf