【发布时间】：2022-05-23 21:25:32
【问题描述】：
例如：
p + p {
/* Some declarations */
}
我不知道+ 是什么意思。这与只为p 定义样式而不使用+ p 有什么区别？
-
在实践中，这对于在相同类型的列表元素之间应用边距或填充非常有用，因此第一个或最后一个元素不需要特殊情况。
标签： css css-selectors
【发布时间】：2022-05-23 21:25:32
【问题描述】：
请参阅 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>。
它是相邻兄弟选择器。
要定义一个 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>旁边/之后)
【讨论】：
-
我对
plus sign和greater sign感到困惑。如果我使用h1>p而不是h1+p，它会给我同样的结果吗？你能解释一下它们之间有什么不同吗？ -
在您的示例中，
h1>p选择作为h1元素的直接（第一代）子元素的任何p元素。h1+p将选择第一个p元素作为h1元素的兄弟（在 dom 的同一级别）。h1>p匹配<h1><p><p></h1>,h1+p匹配<h1></h1><p><p/> -
@MatthewVines 你应该将 h1>p 和 h1+p 添加到你的答案中
-
因此，基本上在您的示例中，它将匹配 <h1> 之后的第一个 <p>，但如果它在 <h1> 之前，它也会匹配相同的 <p> 吗？还是只是在之后？
-
<p>是 invalid 作为<h1>的孩子，但点明白了。
+ 符号表示选择“相邻兄弟”
例如，此样式将从第二个<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/）
浏览器支持
所有现代浏览器都支持相邻兄弟选择器。
学到更多
【讨论】：
“+”是相邻兄弟选择器。它将直接在 p 之后选择任何 p（不是孩子或父母，而是兄弟姐妹）。
【讨论】：
+ 组合子称为Adjacent sibling combinator / Next-sibling combinator。
例如，组合p + p选择器，选择紧跟在p 元素之后的p 元素
它可以被认为是检查紧随其后元素。
这是一个示例 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 combinator / Subsequent-sibling combinator
例如，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 在此示例中也匹配。
【讨论】：
+ 表示相对选择器之一。以下是所有相对选择器的列表：
div p - 选择 <div> 元素内的所有 <p> 元素。
div > p - 选择直接父级为 <div> 的所有 <p> 元素。它也可以向后工作 (p < div)
div + p - 选择紧跟在 <div> 元素之后的所有 <p> 元素。
div ~ p - 选择前面有 <div> 元素的所有 <p> 元素。
【讨论】：
-
最后一个选择器是错误的。 According to MDN: 通用兄弟组合符 (~) 分隔两个选择器，并且仅当第二个元素跟在第一个元素之后（尽管不一定立即）才匹配第二个元素，并且它们都是同一个父元素的子元素
它将匹配与元素“p”紧邻的任何元素p。见：http://www.w3.org/TR/CSS2/selector.html
【讨论】：
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.
最终输出看起来像这样
【讨论】：