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

最新推荐文章于 2024-04-13 14:03:08 发布

p15097962069

最新推荐文章于 2024-04-13 14:03:08 发布

阅读量802

点赞数

文章标签： css css-selectors

原文链接：https://vi.sofbug.com/question/4mVH

版权

例如：

p + p {
  /* Some declarations */
}

我不知道+是什么意思。这是什么之间的区别，只是定义样式p ，而不+ p ？

#1楼

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

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

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

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

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

#2楼

它将匹配与元素“ p”直接相邻的任何元素p 。请参阅： http ： //www.w3.org/TR/CSS2/selector.html

#3楼

这是相邻的兄弟选择器。

从风格飞溅博客。

要定义CSS相邻选择器，请使用加号。
 h1+p {color:blue;} 
上面的CSS代码会将任何h1标题之后（而不是内部）的第一段格式设置为蓝色。

h1>p选择任何p元件，其为直接（第一代）子（内侧） h1元件。

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

h1+p将选择第一p元素是同级（在DOM的相同的水平），为h1元件。

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

#4楼

“ +”是相邻的兄弟选择器。它将直接选择ap之后的任何p（尽管不是孩子或父母，而是同级）。

#5楼

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

#6楼

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

例如，此样式将从第二个<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/ ）

浏览器支持

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

学到更多

#7楼

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

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

#8楼

加号（+）将选择第一个立即元素。使用+选择器时，必须提供两个参数。通过示例将更加清楚：此处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之后的第一个跨度。重要的是要注意，将不会选择第二个跨度。

#9楼

+选择器称为Adjacent Sibling Selector 。

例如，选择器p + p ，选择p元件紧随p元件

可以将其视为检查looking outside元素的looking outside选择器。

这是一个示例片段，使事情变得更加清晰：

 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也已匹配。

#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.

最终输出看起来像这样