CSS Descendant Selector

اگيزيي جوگونو (descendant selector) بادا ناى كى شاكلانو (container selector) دى بولى.

后代选择器可以选择作为某元素后代的元素。

根据上下文选择元素

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

This is a important heading


This is a important paragraph.

Kai Koyarwa Karamar Hanyar

当然，您也可以在 h1 中找到的每个 em 元素上放一个 class 属性，但是显然，后代选择器的效率更高。

语法解释

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

具体应用

后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。

Suppos ki na da wucinwuci kan wucinwuci, wanda ke da sidebar da maincontent. Sidebar ke da background bincike, maincontent ke da background fari, wa dayawa da ke cikin wadannan yankuna su ne listu na likka. A bai zartar da kowane likka a bincike ba, domin kuma likkannin bincike a sidebar su kuma zai nuna bincike.

Sannanin cece kuwa amfaniwarin abin da yaki wuri da karkashi. A wannan lokacin, za a iya saka matsakaici sidebar na class cece sabonin 'sidebar', kuma za a iya saka matsakaici na maincontent sabonin 'maincontent'. Dukansu za a rubuta shi kamar yadda a cikin manyan kwararrun:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

There is an easily overlooked aspect of descendant selectors, that is, the hierarchical interval between two elements can be infinite.

For example, if written as ul em, this syntax will select all em elements inherited from the ul element, regardless of the nesting level of em.

Therefore, ul em will select all em elements in the following marks:

<ul>
  <li>Makama 1</li>
    <ol>
      <li>Makama 1-1</li>
      <li>Makama 1-2</li>
      <li>Makama 1-3</li>
        <ol>
          <li>Makama 1-3-1</li>
          <li>Makama</li> <em>1-3-2</em></li>
          <li>Makama 1-3-3</li>
        </ol>
      </li>
      <li>Makama 1-4</li>
    </ol>
  </li>
  <li>Makama 2</li>
  <li>Makama 3</li>
</ul>

Kai Koyarwa Karamar Hanyar