CSS 中 div 的替代行颜色

问题描述 投票:0回答:4

我正在尝试使用

nth-child(odd)
向 div 添加替代行颜色。

我需要为具有类名

alternative_cls
的div添加替代颜色,但不为具有不同类名的div添加替代颜色。

但问题是它没有跳过具有不同类名的 div,正在应用替代颜色,包括名为 div 的不同类。

这是代码小提琴

我想要的是

enter image description here

html css css-selectors pseudo-class
4个回答
13
投票

给你http://jsfiddle.net/Dfy59/6/

说明:

通过 定义 css

n-th:child
选择器

匹配其父级的第 n 个子级的每个元素,无论类型如何。

所以让我们以您的代码为例(首先删除 no_bg 节点):

.alternative_cls:nth-child(odd){
    background:#ccc;
}

像这样应用:

<div class="alternative_cls"> <!-- alternative_cls(n)=1, odd so apply = (grey) -->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=2, even so don't apply = (transparent) -->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=3, odd so apply = (grey)-->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=4, even so don't apply = (transparent) -->
    ssf
</div>
..
etc

当您在中间插入一个具有不同类的 div 时,就会发生混乱,当发生这种情况时,CSS 仍然将入侵者 div 视为

.alternative_cls
的同级,但随后不会将 css 应用于它:

<div class="alternative_cls">  <!-- alternative_cls(n)=1, odd so apply = (grey) -->
    ssf
</div>
<div class="no_bg">  <!--alternative_cls(n)=2, but don't apply alternative_cls, just apply no_bg = (pink) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd so apply = (grey) NOTE: you'd expect the nth-child selector to skip the last node.. but it didn't, which caused the confusion -->
    ssf
</div>
<div class="alternative_cls"> <!-- n=2, even so don't apply = (transparent) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd so apply = (grey)-->
    ssf
</div>
<div class="alternative_cls">  <!-- n=4, even so don't apply = (transparent) -->
    ssf
</div>

我知道这一点的方法是查看我的 chrome 开发工具并使用 jquery 选择器:

$('.alternative_cls:nth-child(1)')

退货

[<div class="alternative_cls">
    ssf
</div>]

但是(这是违反直觉的部分

$('.alternative_cls:nth-child(2)')

退货

[]

您希望此选择器立即返回 no_bg div 之后的节点..但事实并非如此!

继续..

 $('.alternative_cls:nth-child(3)')

退货

[<div class="alternative_cls">
    ssf
</div>]

(我建议您自己尝试一下,以便理解这个概念)

所以要解决这个问题,你只需将 css 设置为

.alternative_cls{
    width:100%;
    height:60px
}
.alternative_cls:nth-child(1), .alternative_cls:nth-child(even){
    background:#ccc;
}
.no_bg{
     width:100%;
    height:60px;
    background:#f8d6d6
}

这发生了

<div class="alternative_cls">  <!-- n=1, apply the nth-child(1) rule = (grey) -->
    ssf
</div>
<div class="no_bg">   <!--alternative_cls(n)=2, but don't apply alternative_cls, just apply no_bg = (pink) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd, so don't apply any rule = (transparent)-->
    ssf
</div>
<div class="alternative_cls"> <!-- n=2, even so apply the nth-child(even) rule = (grey) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd, so don't apply any rule = (transparent)-->
    ssf
</div>
<div class="alternative_cls">  <!-- n=4, even so apply the nth-child(even) rule = (grey) -->
    ssf
</div>

我希望这能够清楚地说明..因此有了这些知识,您就可以继续使用第 n 个子选择器,您只需考虑这个特殊性


3
投票

这能满足您的需要吗?:

.alternative_cls:first-child,
.alternative_cls:nth-child(2n) {
  background: #ccc;
}

jsFiddle


1
投票

我已将 .no_bg div 移至 .alternative_cls 中,现在工作正常。

<div class="alternative_cls">
    ssf
    <div class="no_bg">
    ssf
</div>
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>

演示


0
投票

正如其他答案中已经说过的,第 n 个孩子选择器计算孩子的数量,仅此而已;你可以做任何事情来改变这一点。 正如已经说过的,您可以将导致问题的 div 排除在第一级子级之外。

如果这是一个问题,另一种方法是将该元素更改为不是 div 的另一种类型。然后,您可以使用 div:nth-of-type(even) 只计算 div。

无论哪种方式,您都需要以某种方式更改您的 DOM。

© www.soinside.com 2019 - 2024. All rights reserved.