例如:
p + p {
/* Some declarations */
}
我不知道+是什么意思。这和只为p定义一个没有+p的样式有什么区别?
例如:
p + p {
/* Some declarations */
}
我不知道+是什么意思。这和只为p定义一个没有+p的样式有什么区别?
当前回答
请参见W3.org上的相邻选择器。
在这种情况下,选择器意味着样式仅适用于另一段落后面的段落。
纯p选择器会将样式应用于页面中的每个段落。
这只适用于IE7或更高版本。在IE6中,样式不会应用于任何元素。顺便说一下,这也适用于>组合子。
另请参阅Microsoft在Internet Explorer中的CSS兼容性概述。
其他回答
请参见W3.org上的相邻选择器。
在这种情况下,选择器意味着样式仅适用于另一段落后面的段落。
纯p选择器会将样式应用于页面中的每个段落。
这只适用于IE7或更高版本。在IE6中,样式不会应用于任何元素。顺便说一下,这也适用于>组合子。
另请参阅Microsoft在Internet Explorer中的CSS兼容性概述。
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.
最终输出如下
“+”是相邻的同级选择器。它将在p之后直接选择任何p(但不是子代或父代,而是兄弟姐妹)。
+显示一个相对选择器。以下是所有相对选择器的列表:
div p-选中<div>元素中的所有<p>元素。
div>p-选择直接父级为<div>的所有<p>元素。它也向后工作(p<div)
div+p-选择一个<div>元素之后立即放置的所有<p>元素。
div~p-选择前面有<div>元素的所有<p>元素。
下面是关于选择器的更多信息。
这是相邻同级选择器。
来自Splash of Style博客。
要定义CSS相邻选择器使用加号。h1+p{颜色:蓝色;}上面的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>旁边/之后)