html - 如何根据 parent 的属性进行选择

标签 html css css-selectors

有没有办法选择 DOM 的 only_child , n-th-child , ETC?我知道有像 some_tag:only-child 这样的选择器, .some_class:only-child , #some_id:only-child ,但根据自身的标记或属性(类、id 等)进行选择。我想要的是根据 parent 的标签或属性进行选择。

例如,我可能想选择 only-child .some_class , 这是id为B的div下面,不是 only-child .some_class ,即 A .

<div>
  <div class="some_class" id="A">
    <div id="B">
    </div>
  </div>
</div>

最佳答案

如果您正在寻找.some_class 的唯一 child ,您需要使用组合器将类选择器和伪类分开。两组不同的选择器之间的父子关系和祖先子孙关系始终用组合符表示(分别为 child combinatordescendant combinator)。

给定您的 HTML,您需要使用子组合器 > 将其限制为直接嵌套在 .some_class 中的唯一元素:

.some_class > :only-child

关于html - 如何根据 parent 的属性进行选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9399994/

相关文章:

javascript - 在 d3 力图中缩放 div 工具提示

javascript - 带有自定义库的 querySelectorAll

html - 具有内联样式的 CSS 伪类

Php 页面显示一些奇怪的符号而不是 CSV 文件中的元素符号列表?

css - 悬停在父元素上时是否可以设置子元素的样式?

javascript - 使用 Chart.js 显示图表

javascript - 本地存储 : Storing Objects vs Simple Data Types in different ways?

html - CSS - 无序列表中的缩进边框

javascript - 每个 ajax 请求从 select 标签重新加载数据

html - 第一个字母 CSS 上的左空格