CSS global：nth-of-type选择器(：nth-of-class)

1rhkuytd 于 12个月前发布在其他

关注(0)|答案(3)|浏览(87)

什么样的CSS选择器可以用来选择父元素中的所有奇数元素，但不一定是兄弟元素？

<div id="parent">
    <div>
        <div class="element">A</div>            
    </div>
    <div class="element">A</div>   
    <div class="element">A</div>         
    <div>
        <div class="element">A</div>            
    </div>
    <div class="element">A</div>            
<div>

我想要的是选择parent``element，并仅对该列表中的奇数索引应用样式。
Demo on jsFiddle.

css

来源：https://stackoverflow.com/questions/13975475/css-global-nth-of-type-selector-nth-of-class

3条答案

按热度按时间

nzrxty8p1#

虽然它使用JavaScript，但您可以在不更改标记的情况下对奇数元素进行样式化：

$('.parent .element:odd').css('font-weight', 'bold');

http://jsfiddle.net/ansonhoyt/MfxYF/

赞(0）回复(0）举报 12个月前

doinxwow2#

我不能把它降到单选择器，但有两个...

.parent > .element:nth-of-type(2n){
  background:#afa !important;
}
.parent > div:nth-of-type(2n) > .element {
  background:#afa !important;
}

View it on JSFiddle

赞(0）回复(0）举报 12个月前

gt0wga4j3#

这花了很长时间，但截至8月22日，这现在可以在Chrome和Safari中实现（Firefox仍在努力）：

.parent .element{
    width:250px;
    background:#faa;
    text-align:center;
}

.parent .element:nth-of-type(2n),
.parent :has(.element):nth-of-type(2n) .element {
    background:#afa !important;
}

This:
<div class="parent">
<div>
    <div class="element">1</div>      
    <div class="element">2</div>   
    <div class="element">3</div>        
</div>
<div class="element">4</div>   
<div class="element">5</div>         
<div>
    <div class="element">6</div>            
</div>
<div class="element">7</div>            
</div>
<br>
Should look like this:
<div class="parent">
<div class="element">1</div>            
<div class="element">2</div>   
<div class="element">3</div>         
<div class="element">4</div>            
<div class="element">5</div>
<div class="element">6</div>            
<div class="element">7</div>      
<div>

赞(0）回复(0）举报 12个月前

我来回答

CSS global：nth-of-type选择器(：nth-of-class)

3条答案

相关问题

热门标签

最新问答