css选择器 ~ （波浪号）、+（加号）、>（大于号）的用法解析和举例

Posted 2023-04-24

参考技术A

~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。

h3~h5选择前面有<h3>元素的每个<h5>元素，即选择h3之后出现的所有h5，两种元素必须拥有相同的 父元素 ，但h5不必紧随h3。

说明：这里的h5，h3也可以换成实际项目中的其他标签的类名、标签名或id等。

~（加号）加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。

大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素，其中B元素是A元素的第一代。

.myDiv>h3选择类名名为myDiv里面的第一代h3。

“+”（加号）CSS 选择器是啥意思？

【中文标题】“+”（加号）CSS 选择器是啥意思？

【英文标题】：What does the "+" (plus sign) CSS selector mean?“+”（加号）CSS 选择器是什么意思？

【发布时间】：2010-11-11 12:06:39

【问题描述】：

例如：

p + p 
  /* Some declarations */

我不知道+ 是什么意思。这与只为p 定义样式而不使用+ p 有什么区别？

【问题讨论】：

在实践中，这对于在相同类型的列表元素之间应用边距或填充非常有用，因此第一个或最后一个元素不需要特殊情况。

【参考方案1】：

请参阅 W3.org 上的 adjacent selectors。

在这种情况下，选择器意味着样式仅适用于紧跟另一个段落的段落。

一个普通的p 选择器会将样式应用于页面中的每个段落。

---

这仅适用于 IE7 或更高版本。在 IE6 中，该样式不会应用于任何元素。顺便说一句，这也适用于 > 组合器。

另请参阅 Microsoft 对 CSS compatibility in Internet Explorer 的概述。

【讨论】：

我发现隐藏时不折叠元素很有用。因此，更合适的隐藏方法是使用visibility : hidden/visible 而不是display : none/block。见this reference。

p + p 和 p > p 有什么区别

@MuhammadRizwan p > p 表示嵌套的p，e.i.位于另一个 p 正下方的任何 p，例如 <p><p>This paragraph</p></p>。

【参考方案2】：

这是相邻兄弟选择器。

来自Splash of Style blog.

要定义一个 CSS 相邻选择器， 使用加号。

h1+p color:blue;

上面的 CSS 代码将格式化 任何 h1 标题之后（不在内部）的第一段 蓝色。

h1>p 选择作为h1 元素的直接（第一代）子（内部）的任何p 元素。

h1>p 匹配 <h1> <p></p> </h1>（<p> 内 <h1>）

h1+p 将选择第一个p 元素作为h1 元素的兄弟（在dom 的同一级别）。

h1+p 匹配 <h1></h1> <p><p/>（<p> 在 <h1> 旁边/之后）

【讨论】：

我对@9​​87654341@ 和greater sign 感到困惑。如果我使用h1>p 而不是h1+p，它会给我同样的结果吗？你能解释一下它们之间有什么不同吗？

在您的示例中，h1>p 选择任何p 元素，它是h1 元素的直接（第一代）子元素。 h1+p 将选择第一个 p 元素作为 h1 元素的兄弟（在 dom 的同一级别）。 h1>p 匹配 <h1><p><p></h1>, h1+p 匹配 <h1></h1><p><p/>

@MatthewVines 你应该将 h1>p 和 h1+p 添加到你的答案中

所以基本上在你的例子中它会匹配

<p> 是 invalid 作为 <h1> 的子级，但可以理解。

【参考方案3】：

+ 符号表示选择“相邻兄弟”

例如，此样式将从第二个<p>开始应用：

p + p 
   font-weight: bold;
 

<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

---

示例

看到这个 JSFiddle 你就会明白了：http://jsfiddle.net/7c05m7tv/ （另一个 JSFiddle：http://jsfiddle.net/7c05m7tv/70/）

---

浏览器支持

所有现代浏览器都支持相邻兄弟选择器。

---

了解详情

http://css-tricks.com/almanac/selectors/a/adjacent-sibling/ http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

【参考方案4】：

"+" 是相邻兄弟选择器。它将直接在 p 之后选择任何 p（不是孩子或父母，而是兄弟姐妹）。

【参考方案5】：

+ 选择器称为 Adjacent Sibling Selector。

例如，选择器 p + p，选择紧跟在 p 元素之后的 p 元素

它可以被认为是一个looking outside 选择器，用于检查紧随其后的元素。

这里有一个示例 sn-p 让事情更清楚：

body 
  font-family: Tahoma;
  font-size: 12px;

p + p 
  margin-left: 10px;

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

由于我们是同一个主题，值得一提的是另一个选择器，~选择器，即General Sibling Selector

例如，p ~ p 选择 p 之后的所有 p 并不重要，但 p 应该具有相同的父级。

这是使用相同标记时的样子：

body 
  font-family: Tahoma;
  font-size: 12px;

p ~ p 
  margin-left: 10px;

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

请注意，最后一个 p 在此示例中也匹配。

【参考方案6】：

+ 选择器以后面的一个元素为目标。在类似的注释中，~ 选择器以后面的所有元素为目标。如果你感到困惑，这里有一个图表：

【讨论】：

迄今为止的最佳答案。主要是因为它有一只鸡。

那么#chicken > box呢？

那么@HaveProblemsEveryday 如果鸡吃了一个盒子，它会瞄准本来会被鸡吃掉的盒子。

【参考方案7】：

+ 表示相对选择器之一。以下是所有相对选择器的列表：

div p - 选中 <div> 元素内的所有 <p> 元素。

div > p - 选择直接父级为<div> 的所有<p> 元素。它也可以向后工作 (p < div)

div + p - 紧跟在<div> 元素之后的所有<p> 元素都被选中。

div ~ p - 所有前面有<div> 元素的<p> 元素都被选中。

Here is some more about selectors.

【讨论】：

最后一个选择器错误。 According to MDN: 通用兄弟组合符 (~) 分隔两个选择器，并且仅当第二个元素跟在第一个元素之后（尽管不一定立即）匹配第二个元素，并且它们都是同一个父元素的子元素

【参考方案8】：

它将匹配任何紧邻元素“p”的元素p。见：http://www.w3.org/TR/CSS2/selector.html

【参考方案9】：

它选择下一个段落并将段落的开头从左侧缩进，就像在 Microsoft Word 中一样。

【参考方案10】：

p+p
//styling the code


p+p
 simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.

    <div>
    <input type="text" placeholder="something">
    <p>This is first paragraph</p>
    <button>Button </button>
    <p> This is second paragraph</p>
    <p>This is third paragraph</p>
    </div>

    Styling part 
    <style type="text/css">
        p+p
            color: red;
            font-weight: bolder;
        
    </style>

   It will style all sibling paragraph with red color.

最终输出如下所示

【参考方案11】：

加号 (+) 将选择第一个直接元素。当您使用 + 选择器时，您必须提供两个参数。通过示例将更加清楚： 这里 div 和 span 是参数，所以在这种情况下，只有 div 之后的第一个 span 才会被设置样式。

 div+ span
   color: green;
   padding :100px;


     <div>The top or first element  </div>
       <span >this is span immediately after div, this will be selected</span>
       <span>This will not be selected</span>

上述样式仅适用于 div 之后的第一个 span。需要注意的是，不会选择第二个跨度。

【参考方案12】：

p 选择此页面中的所有段落 p+p 选择 p 之后的第一个 p 。我的意思是这只是选择一个 p（不是全部）

【参考方案13】：

这意味着它匹配每个紧邻的p 元素

www.snoopcode.com/css/examples/css-adjacent-sibling-selector