是否存在“前一个兄弟元素”选择器？

技术背景

在CSS中，选择器是用来选择HTML元素并为其应用样式的工具。现有的选择器如+（相邻兄弟选择器）和~（通用兄弟选择器）可以选择后续的兄弟元素，但并没有直接提供选择前一个兄弟元素的选择器。然而，在实际开发中，有时会有选择前一个兄弟元素的需求，因此需要一些技巧和方法来模拟实现这一功能。

实现步骤

1. 使用`flex`布局和`order`属性

将父元素设置为display: flex。
反转HTML中兄弟元素的顺序。
使用兄弟选择器（~或+）来选择目标元素。
使用order属性恢复元素在视觉上的顺序。

2. 使用`flex`布局的`row-reverse`或`column-reverse`

将父元素设置为display: flex，并使用flex-direction: row-reverse或flex-direction: column-reverse。
反转HTML中兄弟元素的顺序。
使用兄弟选择器（~或+）来选择目标元素。

3. 使用`float`属性

将兄弟元素设置为float: right。
反转HTML中兄弟元素的顺序。
使用兄弟选择器（~或+）来选择目标元素。

4. 使用`:has()`选择器

利用:has()选择器来选择前一个兄弟元素。例如：previous:has(+ next) 或 previous:has(~ next)。

5. 使用JavaScript/jQuery

使用JavaScript的Node.previousSibling属性来选择前一个兄弟节点。
使用jQuery的prev()方法来选择前一个兄弟元素。

核心代码

1. 使用`flex`布局和`order`属性

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        ul {
            display: flex;
        }

        li:hover + li {
            background-color: red;
        }

        li:last-child {
            order: -1;
        }

        li {
            height: 200px;
            width: 200px;
            background-color: aqua;
            margin: 5px;
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul>
        <li>B</li>
        <li>A</li>
    </ul>
</body>
</html>

2. 使用`flex`布局的`row-reverse`

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
        }

        .flex-item:hover ~ .flex-item {
            background-color: lime;
        }

        .flex-item {
            background-color: orange;
            color: white;
            padding: 20px;
            font-size: 3rem;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="flex-item">5</div>
        <div class="flex-item">4</div>
        <div class="flex-item">3</div>
        <div class="flex-item">2</div>
        <div class="flex-item">1</div>
    </div>
</body>
</html>

3. 使用`:has()`选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .thePrevious:has(+ .theNextSibling) {
            color: red;
        }
    </style>
</head>
<body>
    <div class="thePrevious">Previous</div>
    <div class="theNextSibling">Next</div>
</body>
</html>

4. 使用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        div {
            background-color: lightblue;
            width: 120px;
            height: 40px;
            border: 1px solid gray;
            padding: 5px;
        }
        .wrapper {
            background-color: blue;
            width: 250px;
            height: 165px;
        }
        .parent {
            background-color: green;
            width: 200px;
            height: 70px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="parent">
            "parent" turns red
            <div class="change-parent">
                descendant: "change-parent"
            </div>
        </div>
        <div class="parent">
            "parent" stays green
            <div class="nope">
                descendant: "nope"
            </div>
        </div>
    </div>
    <script>
        $(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
    </script>
</body>
</html>

最佳实践

优先使用CSS方法，因为它们通常性能更好，且不需要JavaScript支持。
如果需要兼容旧浏览器，可以考虑使用JavaScript/jQuery方法。
在使用flex布局和order属性时，要注意元素的布局和交互可能会受到影响。
在使用:has()选择器时，要注意其浏览器兼容性。

常见问题

1. 浏览器兼容性问题

:has()选择器在某些旧浏览器中可能不支持。
flex布局和order属性在一些旧浏览器中可能存在兼容性问题。

2. 布局和交互问题

使用flex布局和order属性可能会影响元素的布局和交互，需要进行适当的调整。
反转HTML元素的顺序可能会影响代码的可读性和维护性。