CSS上一个兄弟选择器

在CSS中，上一个兄弟选择器是一种通过选择指定元素的上一个兄弟元素来应用样式的方法。这个选择器使用符号~来表示，它能够很方便地选取目标元素前面的所有同级元素。

语法

上一个兄弟选择器的语法如下：

element1 ~ element2 {
    /* 样式规则 */
}

其中 element1 是目标元素，element2 是目标元素之前的兄弟元素，两者之间用 ~ 连接。

示例

假设有以下HTML结构：

<!DOCTYPE html>
<html>
<head>
    <style>
        p ~ span {
            color: red;
        }
    </style>
</head>
<body>
    <h2>标题</h2>
    这是一段文字。
    <div>这是一个div</div>
    <span>这是一个span。</span>
</body>
</html>

在上面的示例中，<p> 元素后面的兄弟元素 <span> 将会变成红色，因为我们使用了上一个兄弟选择器p ~ span来选择<p>元素后面的所有同级<span>元素。

实际应用

1. 导航菜单

在导航菜单中，我们经常会使用上一个兄弟选择器来为激活状态的菜单项添加特殊样式。

<!DOCTYPE html>
<html>
<head>
    <style>
        .nav-item {
            display: inline-block;
            margin-right: 10px;
        }
        .nav-item ~ .nav-item {
            color: #888;
        }
        .nav-item.active {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="nav-item">首页</a>
        <a href="#" class="nav-item">关于我们</a>
        <a href="#" class="nav-item active">服务项目</a>
        <a href="#" class="nav-item">联系我们</a>
    </div>
</body>
</html>

在上面的示例中，.nav-item.active的样式会覆盖.nav-item ~ .nav-item的样式，从而实现了为激活状态的菜单项添加特殊样式。

2. 表格样式

上一个兄弟选择器也可以用于表格中，为表格的每列加入间隔线。

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000;
            padding: 5px;
        }
        th ~ td {
            border-left: none;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>25</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>23</td>
            <td>女</td>
        </tr>
    </table>
</body>
</html>

在上面的示例中，th ~ td选择器用于给表格的每列添加左侧的间隔线，增加表格的可读性。