解释我们如何仅使用一个父 class 遍历所有个体 li？

Question

我想仅使用一个父项遍历所有个体 li class 例如："here we using mainDiv" 我们如何在 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;
        }

kindly mention below code

同样，我想通过仅使用一个父 class 名称 (mainDiv) 来遍历第二组 ul > li (a,b,c)。我如何通过 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

我不确定你在说 'traversing' 时到底在问什么。但如果它匹配某些元素，您提供的 css 几乎可以满足您的要求。

匹配mainDiv下的任意li:

.mainDiv li {
   // my css
}

只匹配第二个ul:

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

注意 :last-child 允许 select mainDiv 的最后一个子元素。其他解决方案可能是使用（除其他外）ul:nth-child(2) 或 ul:nth-of-type(2)

解释我们如何仅使用一个父 class 遍历所有个体 li？

Explain how can we Traverse all individual li by using only one parent class?

html

css

traversal

parent-child

selector