Question

我想为第n个第n个孩子旗帜申请绿色

<div id="axis">
     <div class="super"></div>
     <div class="flag">flag 1</div><!-- I want this text to be green-->
     <div class="super"></div>
     <div class="flag">flag 2</div>
     <div class="super"></div>
     <div class="flag">flag3</div>
     <div class="super"></div>
</div>

的CSS：

#axis{
    color:red;
}

#axis .flag:nth-of-type(1){
    color:green;  
}

#axis .flag:nth-child(1){
    color:green;
}

我尝试了两种情况但没有工作......

Fiddle

Answer 1

实现这一目标的另一种方法是

<div id="axis">
    <div class="super"></div>
    <div class="flag">flag 1</div><!-- I want this text to be green-->
    <div class="super"></div>
    <div class="flag">flag 2</div>
    <div class="super"></div>
    <div class="flag">flag3</div>
    <div class="super"></div>
</div>

在CSS中它将是另一种方式：

应用一个通用的CSS：

#axis > div:nth-child(2) {
    color: green;
}

Answer 2

另一种方式DEMO

<ul id="axis">
    <li class="flag">flag 1</li>
    <li class="flag">flag 2</li>
    <li class="flag">flag3</li>
</ul>

.flag {
    list-style:none;
    color:red;
}


.flag:nth-of-type(1) {

    color:green;  
}

css中的nth-type和nth-child无法正常工作

2 个答案: