CSS3 nth-child 当在div中指定class的时候失效求解

发布于
2017-06-08

更新于
2017-06-08

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .aa{background:blue;color:#fff;}
        .aa:nth-child(1){background:red;}
    </style>
</head>
<body>
    <div>1</div>
    <div class="aa">1</div>
    <div class="aa">1</div>
    <div class="aa">1</div>
    <div>1</div>
</body>
</html>

如上所示我想要的是第一个.aa变成红色然而当所有标签都是div的时候 nth-child first-child都失效了
这个怎么破？

css

阅读 6.8k

4 个回答

得票最新

sarike

1.3k2210

发布于
2017-06-08

✓ 已被采纳

类名 === 'aa' && 是body的第一个child

这样显然一个符合的节点都木有呀。

你可以改成这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .aa{background:blue;color:#fff;}
        .aa:nth-child(1){background:red;}
    </style>
</head>
<body>
    <div>1</div>
    <div>    
        <div class="aa">1</div>
        <div class="aa">1</div>
        <div class="aa">1</div>
    </div>
    <div>1</div>
</body>
</html>

E:nth-child(n) { sRules }
匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .aa{background:blue;color:#fff;}
        .aa:nth-child(1){background:red;}
    </style>
</head>
<body>
    <div>1</div>
    <div>    
        <div class="aa">1</div>
        <div class="aa">1</div>
        <div class="aa">1</div>
    </div>
    <div>1</div>
</body>
</html>

效果展示：