代码之家 › 专栏 › 技术社区 › Sudharsan S

css中的第n个类型和第n个子项无法正常工作[重复]

css-selectors css html

1

Sudharsan S · 技术社区 · 12 年前

我想为第一个第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

2 回复 | 直到 12 年前

1

0

Alex Wilson 12 年前

另一种方式 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;  
}

2

0

Mr_Green 12 年前

实现这一点的另一种方法是

<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 > div:nth-child(2) {
    color: green;
}

另一种方式:

应用通用CSS:

.flag {
   /* first .flag element styles here */
   /* though these styles are applied to all .flag elements, in later step they get overridden. */
}

.flag + .flag{
    /* override above styles */
    /* Applies css to all the .flag elements except the first one */
}