css怎么让第一个li不加样式

发布时间：2022-09-05 09:52:48 作者：iii
来源：亿速云阅读：371

CSS怎么让第一个li不加样式

在网页开发中，我们经常需要对列表（<ul> 或 <ol>）中的列表项（<li>）应用样式。然而，在某些情况下，我们可能希望第一个 <li> 元素不应用任何样式，而其他 <li> 元素则保持原有的样式。本文将详细介绍如何使用 CSS 实现这一需求，并提供多种解决方案。

1. 使用 `:not()` 伪类选择器

CSS 中的 :not() 伪类选择器允许我们选择不符合指定条件的元素。通过结合 :first-child 伪类选择器，我们可以轻松地排除第一个 <li> 元素。

li:not(:first-child) {
    /* 在这里添加你想要的样式 */
    color: red;
    font-weight: bold;
}

在这个例子中，除了第一个 <li> 元素，其他所有 <li> 元素都会应用 color: red 和 font-weight: bold 的样式。

1.1 示例代码

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
</ul>

li:not(:first-child) {
    color: red;
    font-weight: bold;
}

1.2 效果

第一个列表项：默认样式
第二个列表项：红色、加粗
第三个列表项：红色、加粗

2. 使用 `:nth-child()` 伪类选择器

:nth-child() 伪类选择器允许我们根据元素在其父元素中的位置来选择元素。通过使用 :nth-child(n+2)，我们可以选择从第二个 <li> 开始的所有 <li> 元素。

li:nth-child(n+2) {
    /* 在这里添加你想要的样式 */
    color: blue;
    text-decoration: underline;
}

在这个例子中，除了第一个 <li> 元素，其他所有 <li> 元素都会应用 color: blue 和 text-decoration: underline 的样式。

2.1 示例代码

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
</ul>

li:nth-child(n+2) {
    color: blue;
    text-decoration: underline;
}

2.2 效果

第一个列表项：默认样式
第二个列表项：蓝色、下划线
第三个列表项：蓝色、下划线

3. 使用 `:first-child` 伪类选择器

虽然 :first-child 伪类选择器通常用于选择第一个子元素，但我们可以通过结合其他选择器来实现排除第一个 <li> 的效果。

li {
    /* 默认样式 */
    color: green;
}

li:first-child {
    /* 重置第一个 <li> 的样式 */
    color: inherit;
    font-weight: normal;
}

在这个例子中，所有 <li> 元素默认应用 color: green 的样式，但第一个 <li> 元素通过 :first-child 伪类选择器重置为默认样式。

3.1 示例代码

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
</ul>

li {
    color: green;
}

li:first-child {
    color: inherit;
    font-weight: normal;
}

3.2 效果

第一个列表项：默认样式
第二个列表项：绿色
第三个列表项：绿色

4. 使用 `:first-of-type` 伪类选择器

:first-of-type 伪类选择器用于选择同类型元素中的第一个元素。与 :first-child 类似，我们可以通过结合其他选择器来实现排除第一个 <li> 的效果。

li {
    /* 默认样式 */
    color: purple;
}

li:first-of-type {
    /* 重置第一个 <li> 的样式 */
    color: inherit;
    font-style: normal;
}

在这个例子中，所有 <li> 元素默认应用 color: purple 的样式，但第一个 <li> 元素通过 :first-of-type 伪类选择器重置为默认样式。

4.1 示例代码

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
</ul>

li {
    color: purple;
}

li:first-of-type {
    color: inherit;
    font-style: normal;
}

4.2 效果

第一个列表项：默认样式
第二个列表项：紫色
第三个列表项：紫色

5. 使用 `+` 相邻兄弟选择器

相邻兄弟选择器 (+) 用于选择紧接在另一个元素后的元素。我们可以利用这个选择器来为第一个 <li> 之后的 <li> 元素应用样式。

li + li {
    /* 在这里添加你想要的样式 */
    color: orange;
    font-size: 1.2em;
}

在这个例子中，除了第一个 <li> 元素，其他所有 <li> 元素都会应用 color: orange 和 font-size: 1.2em 的样式。

5.1 示例代码

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
</ul>

li + li {
    color: orange;
    font-size: 1.2em;
}

5.2 效果

第一个列表项：默认样式
第二个列表项：橙色、字体大小 1.2em
第三个列表项：橙色、字体大小 1.2em

6. 使用 `~` 通用兄弟选择器

通用兄弟选择器 (~) 用于选择在另一个元素后的所有兄弟元素。我们可以利用这个选择器来为第一个 <li> 之后的所有 <li> 元素应用样式。

li ~ li {
    /* 在这里添加你想要的样式 */
    color: pink;
    text-transform: uppercase;
}

在这个例子中，除了第一个 <li> 元素，其他所有 <li> 元素都会应用 color: pink 和 text-transform: uppercase 的样式。

6.1 示例代码

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
</ul>

li ~ li {
    color: pink;
    text-transform: uppercase;
}

6.2 效果

第一个列表项：默认样式
第二个列表项：粉色、大写
第三个列表项：粉色、大写

7. 使用 JavaScript 动态添加类名

虽然 CSS 提供了多种选择器来实现排除第一个 <li> 的效果，但在某些复杂场景下，我们可能需要借助 JavaScript 来动态添加类名。

document.querySelectorAll('li:not(:first-child)').forEach(function(li) {
    li.classList.add('styled');
});

.styled {
    /* 在这里添加你想要的样式 */
    color: brown;
    border: 1px solid black;
}

在这个例子中，除了第一个 <li> 元素，其他所有 <li> 元素都会通过 JavaScript 动态添加 styled 类，从而应用 color: brown 和 border: 1px solid black 的样式。

7.1 示例代码

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
</ul>

.styled {
    color: brown;
    border: 1px solid black;
}

document.querySelectorAll('li:not(:first-child)').forEach(function(li) {
    li.classList.add('styled');
});

7.2 效果

第一个列表项：默认样式
第二个列表项：棕色、黑色边框
第三个列表项：棕色、黑色边框

8. 总结

通过以上几种方法，我们可以轻松地实现让第一个 <li> 元素不加样式的需求。每种方法都有其适用的场景，开发者可以根据具体需求选择最合适的方式。无论是使用 CSS 选择器还是结合 JavaScript，都能有效地控制列表项的样式，提升网页的视觉效果和用户体验。