CSS选择左右多个元素|极客教程

CSS选择左右多个元素

在CSS中，我们经常需要选择多个元素来应用样式。有时候我们可能需要选择一个元素的左边或者右边的多个元素。本文将详细介绍如何使用CSS选择器选择一个元素的左边或者右边的多个元素，以及一些实际场景中的示例。

选择左边元素

选择一个元素的左边元素可以使用伪类选择器:nth-child()结合-n关键字。:nth-child(-n)表示选取前n个元素，如果将-n替换为n，表示选取第n个元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Left Elements</title>
<style>
    div:nth-child(-n+2) {
        color: red;
    }
</style>
</head>
<body>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
</body>
</html>

在上述示例中，我们选择了前两个元素并应用了color: red;样式。运行结果如下：

Element 1 - Red
Element 2 - Red
Element 3
Element 4

选择右边元素

选择一个元素的右边元素同样可以使用伪类选择器:nth-child()结合n关键字。:nth-child(n)表示选取第n个元素，如果将n替换为-n，表示选取倒数第n个元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Right Elements</title>
<style>
    div:nth-child(n+3) {
        background-color: yellow;
    }
</style>
</head>
<body>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
</body>
</html>

在上述示例中，我们选择了第三个和第四个元素并应用了background-color: yellow;样式。运行结果如下：

Element 1
Element 2
Element 3 - Yellow background
Element 4 - Yellow background

实际应用场景

在实际项目中，我们可能会用到选择左右多个元素的场景，比如在导航栏中高亮显示当前页面链接的左右相邻链接。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight Current Nav Link</title>
<style>
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
    }

    li {
        margin: 0 10px;
    }

    li:nth-child(2) {
        color: red;
    }

    li:nth-child(2) + li,
    li:nth-child(2) + li + li {
        color: blue;
    }

    li:nth-child(2) ~ li {
        color: green;
    }
</style>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</body>
</html>

在上述示例中，我们通过选择器:nth-child(2) + li和:nth-child(2) ~ li来选择当前选择的元素的左边和右边元素，并分别应用了不同的颜色样式。