CSS'>'选择器；它是什么？

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经看过>几次CSS代码中使用的“大于”（），但是我无法弄清楚它的作用。它有什么作用？

回答：

回答：

例如，如果您有这样的嵌套div：

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

然后在样式表中声明css规则，如下所示：

.outer > div {
    ...
}

您的规则仅适用于具有“中级”类的div，因为这些div是元素为“外部”类的元素的直接后代（直接子代）（当然，除非您声明其他更具体的规则来覆盖这些规则）

。见小提琴。

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}
<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>
<p>Without Words</p>
<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

回答：

如果您`在选择器之间使用空格代替>，则您的规则将同时应用于两个嵌套div。该空间更为常用，并定义了“后代选择器”，这意味着它将在树上查找任何匹配的元素，而不是像dos那样直接查找子元素>`。

注意：>IE6不支持选择器。不过，它确实可以在所有其他当前浏览器中使用，包括IE7和IE8。

如果你正在寻找进入孔，使用较少的CSS选择器，你可能也想看看+，~和[attr]选择，所有这些都可以是非常有用的。

此页面包含所有可用选择器的完整列表，以及各种浏览器（主要是IE出现问题）对它们的支持的详细信息，以及它们的用法示例。

以上是 CSS&#39;&gt;&#39;选择器；它是什么？ 的全部内容， 来源链接： utcz.com/qa/402204.html

回到顶部