Question

我想通过仅使用一个父类来遍历所有个体li，例如：＆＃34;这里我们使用mainDiv＆＃34;我们怎么能在css3中做到这一点？不在Jquery或javascript。

css:
    .mainDiv ul li:nth-child(1){
       color:red;
    }
   .mainDiv ul li:nth-child(2){
           color:blue;
        }
   .mainDiv ul li:nth-child(3){
           color:yellow;
        }

请提及以下代码

同样明智的我想要遍历第二组ul＆gt; li（a，b，c）只使用一个父类名（mainDiv）。我怎么能用css3做到这一点？

HTML：

 <div class="mainDiv">

    <ul>
    <li>x</li>
    <li>y</li>
    <li>z</li>
</ul>

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

</div>

Answer 1

如果我理解您的问题，那么此HTML代码可能会有所帮助。

<head>
    <style>
        /* all list items will be blue */
        .my-class li {
            color: blue;
        }

        /* only second list will be bold */
        .my-class ul:nth-child(2) li {
            font-weight: bold;
        }

        /* all third list items will be underline */
        .my-class ul li:nth-child(3) {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="my-class">
        <ul>
            <li>x</li>
            <li>y</li>
            <li>z</li>
        </ul>

        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </div>
</body>

Answer 2

在说'穿越'时，我不确定你在问什么。但如果它匹配某些元素，那么你提供的css几乎就是你所要求的。

匹配mainDiv下的任何li：

.mainDiv li {
   // my css
}

仅匹配第二个ul中的那些：

.mainDiv ul:last-child li {
   // my css
}

请注意:last-child允许选择mainDiv的最后一个子节点。其他解决方案可以使用（以及其他）ul:nth-child(2)或ul:nth-of-type(2)

解释我们如何通过仅使用一个父类来遍历所有个体li？

2 个答案: