Html 解释如何仅使用一个父类遍历所有单个li？_Html_Css_Parent Child_Selector_Traversal

Html 解释如何仅使用一个父类遍历所有单个li？

html css

Html 解释如何仅使用一个父类遍历所有单个li？,html,css,parent-child,selector,traversal,Html,Css,Parent Child,Selector,Traversal,我想通过只使用一个父类遍历所有单个li，例如：“这里我们使用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

我想通过只使用一个父类遍历所有单个li，例如：“这里我们使用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;
        }

请注明以下代码

像wise一样，我希望只使用一个父类名称（mainDiv）遍历第二组ul>li（a、b、c）。我如何通过css3实现这一点

HTML:



x
y
z


a
b
c

如果我理解您的问题，此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>


/*所有列表项都将为蓝色*/
.我的班级李{
颜色：蓝色；
}
/*只有第二个列表是粗体的*/
我的班级：第n个孩子（2）李{
字体大小：粗体；
}
/*所有第三个列表项都将加下划线*/
.我的班级：第n个孩子（3）{
文字装饰：下划线；
}

x
y
z


a
b
c

我不确定您在说“遍历”时到底在问什么。但是如果它匹配某些元素，那么您提供的css几乎满足您的要求

要匹配mainDiv下的任何li：

.mainDiv li {
   // my css
}

要仅匹配第二个ul中的内容，请执行以下操作：

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

请注意，

：last child

允许选择mainDiv的最后一个子项。其他解决方案可能是使用（除其他外）

ul:nth child（2）

或

ul:nth类型（2）

/*只有第二个列表是加粗的。此代码将影响第二个ul中所有li的“加粗”。但我需要一个人

例如：

只有第二个列表是粗体的*/。我的类ul:nth child（2）li:nth child（2）{color:red；}
此代码不影响第二个li（即：“b”）。我的类ul:nth child（2）li:nth child（2）

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