html - CSS 规则应用于其父元素中唯一的元素

标签 html css

<分区>

我已经标记好了

.parent {
  padding:5px;
}

.parent  .child:only-child {
  color:red;
}
<div class="parent">
<div class="elem1 child">
 Child
</div>
<div class="elem2 child">
 Child
</div>
<div class="elem3 child">
 Child
</div>

</div>
<div class="parent">
<div class="elem1">
 Child 
</div>
<div class="elem2">
 Child
</div>
<div class="elem3 child">
 I need to change it here
</div>
</div>

如你所见, 我不确定如何在第二个父类中检测到“elem3 child”。 在这个类中,elem3 实际上是唯一具有子类的元素。

在这种情况下是否有任何 Css 规则来选择它? 感谢您的帮助。

最佳答案

请看下面是否适合您:

.parent {
  padding:5px;
}

.parent [class="elem2"] + [class="elem3 child"] {
  color:red;
}
<div class="parent">
    <div class="elem1 child">
     Child
    </div>
    <div class="elem2 child">
     Child
    </div>
    <div class="elem3 child">
     Child
    </div>
    
    </div>
    <div class="parent">
    <div class="elem1">
     Child 
    </div>
    <div class="elem2">
     Child
    </div>
    <div class="elem3 child">
     I need to change it here
    </div>
</div>

关于html - CSS 规则应用于其父元素中唯一的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53331470/

上一篇:html - 两行间距问题 - HTML 模板

下一篇:html - 磨砂玻璃效果 : filter: blur()

相关文章:

javascript - 使用 Javascript/JQuery 将表单提交的数据保存到 CSV 文件

javascript - HTML 文本输入大小

html - Logo 中的相对位置不起作用

html - 提交按钮不是容器的全高

html - 如何在 coldfusion 中将密码作为哈希插入到 Ms SQL 中?

javascript - polymer CSS 问题

html - Google 图片广告超出父 div

jquery - 使用 Timer JQuery 更改背景颜色 CSS

javascript - 动态CSS类属性?

javascript - CSS 动画在 Firefox 中触发两次并显示 "blinking"