子元素 | CSS-Tricks

CSS 年鉴 → 选择器 → C → 子元素

Sara Cope 于 2016 年 1 月 12 日

CSS 中的子元素组合器是“大于”符号，它看起来像这样

ol > li {
  color: red;
}

它的意思是“选择作为直接后代的元素”。在本例中：“选择作为有序列表的直接后代的列表项”。为了说明

<ol>
  <li>WILL be selected</li>
  <li>WILL be selected</li>
  <ul>
     <li>Will NOT be selected</li>
     <li>Will NOT be selected</li>
  </ul>
  <li>WILL be selected</li>
</ol>

尝试在使用以下演示时删除>符号

查看 CodePen 上 CSS-Tricks 的 f149edb15c53d157a7009b816ee919d2 (@css-tricks)。

也称为…

子元素组合器是规范中对它的称呼，但您也会听到它被称为

子元素选择器
直接后代选择器
直接后代组合器

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	任何	任何	任何	7+	任何	任何

prakash

# 2015 年 7 月 14 日

为什么子元素选择器在<table>中不起作用？

Chris Coyier

评论永久链接# 2016 年 1 月 12 日
我猜想!

如果你写 HTML 像这样
```
<table>
  <tr>
    <td>thing</td>
  </tr>
</table>
```
然后你写一个像这样的选择器
```
table > tr > td {
  color: red;
}
```
那将无法工作，因为在渲染的 DOM 中，它实际上会像这样
```
<table>
  <TBODY>
  <tr>
    <td>thing</td>
  </tr>
  </TBODY>
</table>
```
因为 <tbody> 是表格标记的必需部分，如果你不添加，浏览器会自动添加进去。这种 DOM 结构意味着 <tr> 不再是 <table> 的子元素了!

vidya Veeramony

# 2018 年 12 月 23 日

那么 ol > li 选择器和 ol li 之间有什么区别呢？即使有空格，也会选择列表中的所有 li 元素。

texxs

评论永久链接# 2019 年 6 月 27 日

这个

Jass

# 2019 年 9 月 1 日

ol > li

ol > li {
    background-color: green;
}

将导致

<ol>
    <li>Green.</li>
    <li>Green.</li>
    <ul>
        <li>Not Selected.</li>
        <li>Not Selected.</li>
    </ul>
    <li>Green.</li>
</ol>

而 ol li

ol li {
    background-color: green;
}

<ol>
    <li>Green.</li>
    <li>Green.</li>
    <ul>
        <li>Green.</li>
        <li>Green.</li>
    </ul>
    <li>Green.</li>
</ol>

csengh

# 2019 年 11 月 10 日

你说：“选择仅为直接后代的元素”。
对我来说，这意味着：它只向下查找一层，不再深入，但不幸的是，这对我不起作用。

div > p {
            color: red
}

<div>
        this will match

            <div>this will NOT match
                <p>this will match
            </div>

                <p>Oops. this is thre levels deep so WHY Match?
            </p>
            Oops. this is two levels deep so WHY Match?
        </p>
    </div>

它哪里错了，请帮忙。

John

# 2020 年 3 月 8 日

嗨，我想知道是否有人可以帮助我更好地理解这一点。我拥有以下 CSS 代码，它完美地工作，因为 HTML 实际上显示为表格。显然，这里省略了几行以节省空间。

div.tableRow > p, div.tableRow > label, div.tableRow > input {
display: table-cell;
vertical-align: top;
padding: 3px;
}

如果我将 CSS 选择器更改为此，它将不再应用样式。

div.tableRow p, div.tableRow label, div.tableRow input {
display: table-cell;
vertical-align: top;
padding: 3px;
}

到目前为止，我的理解是，如果你使用没有 > 符号的选择器（例如 div.tableRow p），那么将选择 div.tableRow 的所有 p 后代，所以如果我删除 “>” 为什么我的表格显示样式会丢失？
我肯定是我没有完全理解，所以任何帮助都会受到赞赏。

更多信息

也称为…

浏览器支持

评论

发表评论 取消回复

发表评论取消回复