【问题标题】：how do I select the first li of the second list? [duplicate]如何选择第二个列表的第一个 li？ [复制]
【发布时间】：2020-04-29 17:39:35
【问题描述】：

这是我正在使用的 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>

我希望第二个列表的第一个 li 具有填充：0px 0px 10px 用于移动和平板电脑视图。我试过这个选择器，但它不起作用：

.list:nth-of-type(2) li:first-child{
    padding: 0px 0px 10px;
}

【问题讨论】：

标签： html css css-selectors html-lists

【解决方案1】：

要选择第二个ul 的第一个li，需要使用:nth-child css 选择器。你可以在这里找到更多信息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>

【讨论】：

【解决方案2】：

你不能选择 id,class...etc 的 nth-* 但在 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";
}

【讨论】：

【解决方案3】：

您好，您的代码运行良好。要了解您通过 .list:nth-of-type(2) li:first-child 选择正确的元素，我在 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>

【讨论】：