From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/css/descendant_combinator/index.html | 109 +++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 files/zh-cn/web/css/descendant_combinator/index.html (limited to 'files/zh-cn/web/css/descendant_combinator') diff --git a/files/zh-cn/web/css/descendant_combinator/index.html b/files/zh-cn/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..69aec535c7 --- /dev/null +++ b/files/zh-cn/web/css/descendant_combinator/index.html @@ -0,0 +1,109 @@ +--- +title: 后代选择器 +slug: Web/CSS/Descendant_combinator +tags: + - CSS + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

后代组合器(通常用单个空格( )字符表示)组合了两个选择器,如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先(父母,父母的父母,父母的父母的父母等)元素,则它们将被选择。利用后代组合器的选择器称为后代选择器

+ +
/* List items that are descendants of the "my-things" list */
+ul.my-things li {
+  margin: 2em;
+}
+ +

从技术上讲,后代组合器是两个选择器之间的一个或多个 {{Glossary("CSS")}}  空格字符-空格字符和/或四个控制字符之一:回车,换页,换行和制表符在没有其他组合器的情况下。此外,组成组合器的空白字符可以包含任意数量的CSS注释。

+ + + +

语法

+ +
selector1 selector2 {
+  /* property declarations */
+}
+ +

Examples

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Item 1</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Item 2</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

Result

+ +

{{EmbedLiveSample("Examples", "100%", 160)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}{{Spec2("CSS1")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.descendant")}}

+ +

相关

+ + -- cgit v1.2.3-54-g00ecf