html – CSS – 选择第一个带有类的子项

概述我最近一直试图弄清楚为什么这不起作用.香港专业教育学院开始试图找到一个解决一个简单问题的好方法,但我发现这样做的每一种方式看起来都很混乱.基本上我想要做的是将一些样式应用于父节点中具有特定类的第一个子节点,在我的示例中,我尝试将红色的背景颜色应用于每个.parent中的.class的第一个实例.你可以在 fiddle here中看到我的尝试. 这是我创建的最终代码.问题是,这似乎非常混乱,我真的不 我最近一直试图弄清楚为什么这不起作用.香港专业教育学院开始试图找到一个解决一个简单问题的好方法,但我发现这样做的每一种方式看起来都很混乱.基本上我想要做的是将一些样式应用于父节点中具有特定类的第一个子节点,在我的示例中,我尝试将红色的背景颜色应用于每个.parent中的.class的第一个实例.你可以在 fiddle here中看到我的尝试.

这是我创建的最终代码.问题是,这似乎非常混乱,我真的不喜欢这样的事实,我必须将所有.child类设置为红色,然后设置除了第一个返回白色.必须有一个更清洁/更好的方法来做到这一点？

HTML

<div >    <p>Paragraph</p>    <div >Child 1</div>    <div >Child 2</div>    <div >Child 3</div>    <div >Child 4</div></div><div >    <p>Paragraph</p>    <div>broken</div>    <div >Child 1</div>    <div >Child 2</div>    <div >Child 3</div>    <div >Child 4</div></div>

CSS

/*** Does Not Work ***/.child:first-child{    background-color:#f00;}/*** Does Not Work ***/.child:nth-of-type(1){    background-color:#f00;}/*** Works But Is Messy! ***/.child{    background-color:#f00;}.child ~ .child{    background-color:#fff;}

解决方法 它可能有点多,但你可以使用：不是和通用选择器*这样：

*:not(.child) + .child {  color: red;}

<div >  <p>Paragraph</p>  <div >Child 1</div>  <div >Child 2</div>  <div >Child 3</div>  <div >Child 4</div></div><div >  <p>Paragraph</p>  <div>broken</div>  <div >Child 1</div>  <div >Child 2</div>  <div >Child 3</div>  <div >Child 4</div></div>

注意：但是,序列中的任何中断(另一个非子类的div后跟另一个子类div)将重复选择器.

JSfiddle Demo

总结

以上是内存溢出为你收集整理的html – CSS – 选择第一个带有类的子项全部内容，希望文章能够帮你解决html – CSS – 选择第一个带有类的子项所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。