“>”（大于号）CSS 选择器是什么意思？

Question

例如：

div > p.some_class {
  /* Some declarations */
}

符号到底是什么意思？

Answer 1

是子组合器，有时会被错误地称为直接后代组合器。¹

这意味着选择器

div > p.some_class

仅匹配直接嵌套在

.some_class内部的div

的段落，而不匹配进一步嵌套在其中的任何段落。这意味着匹配

div > p.some_class

 的每个元素也必然与

div p.some_class

 匹配，并带有

后代组合器（空格），因此两者经常被混淆是可以理解的。

比较子组合器与后代组合器的图示：

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

<div>
    <p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- [2] div p.some_class -->
    </blockquote>
</div>

哪些元素与哪些选择器匹配？

与 div > p.some_class

和

div p.some_class
均匹配该
p.some_class

 直接位于

div

 内部，因此两个元素之间建立了父子关系。由于“child”是“后代”的一种类型，因此根据定义，任何子元素也是后代。因此，这两条规则都适用。

仅匹配div p.some_class

该
p.some_class

 包含在

blockquote

 内的

div

，而不是

div

 本身。虽然这个

p.some_class

是

div

的后代，但它不是孩子；这是一个孙子。因此，仅应用其选择器中具有后代组合器的规则。

1许多人进一步将其称为“直接子元素”或“直接子元素”，但这完全没有必要（而且对我来说非常烦人），因为子元素 _{无论如何根据定义是直接的，所以他们意思完全相同。不存在“间接孩子”这样的东西。}

Answer 2

>

（大于号）是一个 CSS 组合器。

组合器是解释选择器之间关系的东西。

一个 CSS 选择器可以包含多个简单选择器。在简单的选择器之间，我们可以包含一个组合器。

CSS3中有四种不同的组合器：

后代选择器（空格）

子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器(~)

注意：

< 在 CSS 选择器中无效。

例如：

<!DOCTYPE html> <html> <head> <style> div > p { background-color: yellow; } </style> </head> <body> <div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <span><p>Paragraph 3 in the div.</p></span>  </div> <p>Paragraph 4. Not in a div.</p> <p>Paragraph 5. Not in a div.</p> </body> </html>

输出：

有关 CSS 组合器的更多信息

Answer 3

http://www.w3.org/TR/CSS2/selector.html#child-selectors

Answer 4

p

类的

some_class

元素，这些元素是

div 下的直接

。

Answer 5

（子选择器）是在 css2 中引入的。
div p
 选择 div 元素的后代的所有 p 元素，而 
div > p
 仅选择子 p 元素，而不选择孙子、曾孙等。

<style>

  div p{ color:red }       /* match all p in div */
  div > p{ color:blue }    /* match only children p of div*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
   <p>para tag, child and decedent of p.</p>
</div>

有关 CSS Ce[lectors 及其使用的更多信息，请查看我的博客，

css 选择器和 css3 选择器

Answer 6

所有具有

p

 类的

some_class

 标签都是

div

 标签的直接子代。

Answer 7

<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>

CSS

div > p.some_class{
    color:red;
}

所有

<p>

和

.some_class

 的直接子级都会获得应用于他们的样式。

Answer 8

CSS 中的大号 ( > ) 选择器意味着右侧的选择器是左侧选择器的直接后代/子级。

一个例子：

article > p { }

表示仅对文章后面的段落进行样式设置。

Answer 9

nav > a:not(:hover); //什么是“a:not(:hover)”？我该如何使用这个语法？ ❤CSS

“>”（大于号）CSS 选择器是什么意思？

问题描述投票：0回答：9

9个回答

最新问题

“>”（大于号）CSS 选择器是什么意思？

问题描述 投票：0回答：9

9个回答

最新问题

问题描述投票：0回答：9