仅使用css

Question

尝试仅使用CSS选择第二个“列左”，更改HTML不是一个选项。 ：nth-​​of-type（2）正在选择div的两个

<div class="collection">

            <div class="column-left"> 
                    
            </div>

            <div class="column-left">

            </div>
</div>

Answer 1

使用nth-child（）选择器获得所需的结果

将您的CSS更改为：

.column-left:nth-child(2) {
color: red; 
}

此链接将解释nth-child选择器和nth-of-type之间的区别：

Link

Answer 2

只需使用nth-child(n)代替nth-of-type

＆＃13;

＆＃13;

.collection .column-left:nth-child(2) {
    color: red; 
}

＆＃13;

<div class="collection">

            <div class="column-left"> 
                123
            </div>

            <div class="column-left">
                456
            </div>
</div>

＆＃13;

＆＃13;

＆＃13;