thi是我正在使用的CSS类：
.list {
flex-direction: column;
align-items: inherit !important;
width: 100%;
display: inline-flex;
border-bottom: none;
text-decoration: none;
}
.list li {
padding: 10px 0;
display: flex;
line-height: 1.4;
padding-left: 0;
border-bottom: #454b52 1px solid;
}
视图的HTML结构：
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
我想将secont列表的第一个li作为填充的目标：移动和平板电脑视图为0px 0px 10px。我试过这个选择器，但它不起作用：
.list:nth-of-type(2) li:first-child{
padding: 0px 0px 10px;
}
要选择第二个ul的第一个li，需要使用:nth-childcss选择器。你可以在这里找到更多信息https://www.w3schools.com/cssref/sel_nth-child.asp.
这是一个例子：
.list {
flex-direction: column;
align-items: inherit !important;
width: 100%;
display: inline-flex;
border-bottom: none;
text-decoration: none;
}
.list li {
padding: 10px 0;
display: flex;
line-height: 1.4;
padding-left: 0;
border-bottom: #454b52 1px solid;
}
ul:nth-child(2) li:nth-child(1){
border-bottom: red 1px solid;
}<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>您不能选择id的nth-*，class。。。etc但是在css中，您只能通过使用示例的标签名称<ul>作为选择器来实现这一点
你可以这样做：
ul:nth-of-type(2) li:first-of-type{
/* your css properties here for the li */
}
Javascript
你可以使用这样的javascript：
elements = document.querySelectorAll('.list');
if (elements[1]) {
// get first **li**
li = elements[1].firstElementChild;
// try to change background color like this
li.style.backgroundColor = "blue";
}
嗨，您的代码运行良好。为了理解你选择了正确的元素。list:nth of type(2(li：第一个孩子我在li中使用了数字，并使用了红色。请检查以下代码：
<html>
<style>
.list {
flex-direction: column;
align-items: inherit !important;
width: 100%;
display: inline-flex;
border-bottom: none;
text-decoration: none;
}
.list li {
padding: 10px 0;
display: flex;
line-height: 1.4;
padding-left: 0;
border-bottom: #454b52 1px solid;
}
.list:nth-of-type(2) li:first-child{
padding: 0px 0px 10px;
color: red;
}
</style>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="list">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>