例如:

p + p {
  /* Some declarations */
}

我不知道+是什么意思。这和只为p定义一个没有+p的样式有什么区别?


当前回答

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.

最终输出如下

其他回答

请参见W3.org上的相邻选择器。

在这种情况下,选择器意味着样式仅适用于另一段落后面的段落。

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


这只适用于IE7或更高版本。在IE6中,样式不会应用于任何元素。顺便说一下,这也适用于>组合子。

另请参阅Microsoft在Internet Explorer中的CSS兼容性概述。

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

“+”是相邻的同级选择器。它将在p之后直接选择任何p(但不是子代或父代,而是兄弟姐妹)。

+显示一个相对选择器。以下是所有相对选择器的列表:

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

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

div+p-选择一个<div>元素之后立即放置的所有<p>元素。

div~p-选择前面有<div>元素的所有<p>元素。

下面是关于选择器的更多信息。

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.

最终输出如下