我在哪里可以在CSS中使用+和>?

Where I can use + and > in CSS?

提问人:Code Lover 提问时间:4/15/2012 最后编辑:Christofer EliassonCode Lover 更新时间:11/22/2013 访问量:15104

问:

这可能是一个基本问题,但对我来说,我仍然困惑于我可以在哪里使用或在 CSS 中使用。+>

我看到很多选择器,比如 or 等,但我不确定有什么区别以及何时使用它们?li > adiv + span

css css-selectors

评论

3赞 deathlock 4/15/2012
@bažmegakapa,如果他不知道“+”或“>”叫什么,他怎么能用谷歌搜索呢?
0赞 kapa 4/15/2012
请阅读手册。- :子选择器。匹配作为元素 E 的(直接)子元素的任何 F 元素。 - :相邻的同级选择器。匹配紧跟同级元素 E 前面的任何 F 元素。 您必须记住的 30 个 CSS 选择器E > FE + F
0赞 Chen Kinnrot 4/15/2012
会有所帮助

答:

37赞 Gabe 4/15/2012 #1

>符号表示选择直系后代

例:

CSS的

div > ul {
   list-style: none;
}

[HTML全文]在这里,样式将应用于<ul>

<div>
  <ul>
  </ul>
</div>

+ 号表示选择相邻的兄弟姐妹

例:

CSS的

p + p
{
   font-weight: bold;
} 

[HTML全文]在这里,这种风格将适用于后者<p>

<div>
   <p></p>
   <p></p>
</div>

评论

0赞 Code Lover 4/15/2012
我要感谢你们所有人。对于这个答案,有一个困惑。例如。李>一种手段,它会影响孩子。那么它也会影响任何子 A 标签吗?对于 +,使用 + 与分组类有什么区别?
0赞 Gabe 4/15/2012
它只会影响直接<a>而不会影响任何子级。唯一的区别是 + 只会影响相邻的兄弟姐妹。其中分组类将影响应用该类的所有内容。
0赞 Code Lover 4/15/2012
那么+呢??我的意思是我仍然混淆分组类和使用 + ...有没有+的具体用法,或者两者都是一样的。
0赞 Code Lover 4/15/2012
我已经使用>与子孩子进行了检查,这也影响了他们。那么,如果你说它应该只影响第一个孩子而不是第一个孩子的子孩子,为什么和我在一起呢???
0赞 powerbuoy 4/15/2012 #2

li > a将仅选择作为元素的直接后代的元素。 将仅选择元素后面的元素。alidiv + spanspandiv

在@bažmegakapa的链接中阅读更多内容: http://www.w3.org/TR/CSS2/selector.html#pattern-matching

2赞 Bojangles 4/15/2012 #3

直接子选择器。在您的示例中,这将仅选择作为 的直接后代的标签。>li > a<a><li>

均值选定元素的同级元素。在您的示例中,将选择 a 旁边的任意 s(具有相同的父级)。+div + span<span><div>

6赞 Christofer Eliasson 4/15/2012 #4

选择器在 W3 CSS 规范中进行了广泛的解释,但这里有一个摘要:

即时子选择器

选择器是直接子选择器。在您的示例中,规则将选择作为元素的直接子元素的任何元素。>li > a<a><li>

在此示例中,规则将选择定位点:

<ul>
   <li><a href="#">An anchor</a></li>
</ul>

相邻的同级选择器

选择器是相邻的同级选择器。在您的示例中,规则将选择紧接在元素前面的任何元素,并且它们都共享相同的父元素。+div + span<span><div>

在这种情况下,将选择 span 元素:

<article>
   <div>A preceding div element</div>
   <span>This span would be selected</span>
</article>

评论

3赞 powerbuoy 4/15/2012
“div + span 选择与 div 具有相同父级的 span。”啊,好吧,所以不需要?它会匹配此 HTML 中的两个 s 吗? .我以为只有第二个会在这里匹配。divspanspan<span/><div/><span/>span
0赞 We Are All Monica 5/23/2013
从您链接到的规范(强调后加): 相邻的同级选择器具有以下语法:E1 + E2,其中 E2 是选择器的主题。如果 E1 和 E2 在文档树中共享相同的父级,并且 E1 紧接在 E2 之前,则选择器将匹配,忽略非元素节点(如文本节点和注释)。
-1赞 Dale 4/15/2012 #5

我不确定 + 号,但 css 中的 > 符号表示直接子号,请考虑一下

div > h1 { color: red; }

这将设置作为 div 的直接子级的所有 h1 标签的样式。

<h1>BLAH</h1>
<div>
    <h1>BLAH</h1>
</div>

在这种情况下,第一个 h1 将被单独保留,第二个 h1 因为它是 div 标签的直接子项,因此将是红色的。