CSS相邻选择器/含义 [英] CSS Adjacent Selector / Meaning

问题描述

以下选择器是什么意思？

  .a .b + .c .d {...} 
  

意义（以及它的功能方式）：选择 d 里面的 c 里面 b 里面 a

  / *括号隐藏模糊度* / 
（.a .b + .c）。 d 
  

这是正确使用邻接同级选择器吗？

解决方案

在旁边的 .c 中选择 .d / code> .a




你放置括号的方式对我来说也有意义。让他们更清楚些：

 （（（。a）.b）+ .c）.d 
  

在此示例中，只有第二个 pd ：

 < div class =a> 
< div class =b> 
< p class =d>< / p> <！ -  [1]  - > 
< / div> 
< div class =c> 
< p class =d>< / p> <！ -  [2]  - > 
< / div> 
< div class =c> 
< p class =d>< / p> <！ -  [3]  - > 
< / div> 
< / div> 
  
 
 
 
 
 
 
 未选择 > 
这个 pd 元素不包含在 c 的元素中。
 
 
 
 
 已选择 
 
此 pd 元素包含在 .c 元素。  .c 元素紧跟在 .b 元素之后，这两个元素共享。 
          c> pd 元素包含在 .c 元素中。然而，这不紧跟在 .b 元素之后;而是它在另一个 .c 元素之后，因此它的 pd 不满足选择器。
 
 
 
如果使用一般同胞组合器〜而不是相邻的兄弟组合器 + ，
  .a .b〜.c .d 
  
然后， pd 将匹配。
 
 
 
 
 
 
 
 
在CSS语法中 + 优先级是什么？
 
 
使用每个选择器组作为步骤，从右到左处理序列中的所有复合选择器和组合器。 此回答详细说明。 （这可能是反直觉的，当你认为在括号中;有意义的是，它只是处理括号，如果最外面的那些是首先，无论是顺序是好的，但是，只要你记得组合器不是联想。详细信息的链接答案。）
 
What is meant by the following selector?
.a .b + .c .d { ... }
Intended meaning (and way in which it appears to function): Select d inside c that is adjacent to b inside a
/* Brackets to hide ambiguity */
(.a .b + .c) .d
Is this correct use of the adjacenct sibling selector? What is the operator + precedence in CSS grammar?
解决方案

  
Select .d inside .c that is adjacent to .b inside .a
Yes, that's right. The way you placed your brackets also makes sense to me. Nest them some more to be clearer:
(((.a) .b) + .c) .d
In this example, only the second p.d element is matched:
<div class="a">
  <div class="b">
    <p class="d"></p> <!-- [1] -->
  </div>
  <div class="c">
    <p class="d"></p> <!-- [2] -->
  </div> 
  <div class="c">
    <p class="d"></p> <!-- [3] -->
  </div>
</div>



Not selected

This p.d element isn't contained in an element with the class c.
Selected

This p.d element is contained in a .c element. The .c element immediately follows a .b element, and both of these share the .a ancestor element.
Not selected

This p.d element is contained in a .c element. However, this doesn't immediately follow a .b element; instead it comes after another .c element, so its p.d doesn't satisfy the selector.

If the general sibling combinator ~ were used instead of the adjacent sibling combinator +, as in
.a .b ~ .c .d
Then this p.d would be matched.



  
What is the operator + precedence in CSS grammar?
All compound selectors and combinators in a sequence are processed from right to left, using each selector group as a step. This answer elaborates. (This may be counter-intuitive when you think in brackets; to make sense of it simply treat the brackets as if the outermost ones came first. Either ordering is fine, though, as long as you remember that combinators aren't associative. See the linked answer for details.)

                        
这篇关于CSS相邻选择器/含义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！