CSS选择器找到兄弟节点的上一个兄弟|极客教程

CSS选择器找到兄弟节点的上一个兄弟

在网页开发中，经常需要使用CSS选择器来定位元素并对其进行样式设置或操作。在这些情况下，有时候需要定位元素的上一个兄弟节点的上一个兄弟节点，这就需要用到一些特殊的CSS选择器来实现。

CSS选择器简介

CSS选择器是一种用于定位HTML元素的一种方式，它可以通过元素的标签名、类名、ID等属性来定位元素。在CSS中，选择器的作用是决定哪些元素将被样式所影响。

常见的CSS选择器有：

标签选择器
类选择器
ID选择器
后代选择器
子元素选择器
相邻兄弟选择器
兄弟选择器

通过CSS选择器找到兄弟节点的上一个兄弟

在CSS中，我们可以使用兄弟选择器（+符号）来选择元素的相邻兄弟节点。但是如果要选中相邻兄弟节点的上一个兄弟，就需要稍微复杂一些。

例如，在以下HTML结构中，我们希望选中<span>标签的上一个兄弟节点的上一个兄弟节点：

<div>
    <p>Paragraph 1</p>
    <div>Div 1</div>
    <span>Span 1</span>
    <p>Paragraph 2</p>
</div>

如果要选中<span>标签的上一个兄弟节点（<div>Div 1</div>）的上一个兄弟节点（Paragraph 1</p>），可以使用以下CSS选择器：

span ~ div ~ p {
  /* 在这里设置样式 */
}

这里的~符号表示选中所有在同一级别的兄弟节点，可以连续使用来选择更远的兄弟节点。

示例代码

接下来，我们将使用一个简单的示例来演示如何通过CSS选择器找到兄弟节点的上一个兄弟。

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>CSS选择器示例</title>
    <style>
        span ~ div ~ p {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>
        <p>Paragraph 1
        <div>Div 1</div>
        <span>Span 1</span>
        Paragraph 2
    </div>
</body>
</html>

在这个示例中，我们使用了CSS选择器span ~ div ~ p来选中<span>标签的上一个兄弟节点的上一个兄弟节点，然后为其设置了红色字体和粗体。