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

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

例如：

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


>
符号到底是什么意思？

css css-selectors
9个回答
798
投票

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

这意味着选择器

div > p.some_class
仅匹配直接嵌套在
a
.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>






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




  1. 与 div > p.some_class
     和 
    div p.some_class
     均匹配
该 
    p.some_class
     直接位于 
    div
     内部，因此两个元素之间建立了父子关系。由于“child”是“后代”的一种类型，因此根据定义，任何子元素也是后代。因此，这两条规则都适用。
    

    

  2. 仅匹配div p.some_class
    
该 
    p.some_class
     包含在 
    blockquote
     内的 
    div
    ，而不是 
    div
     本身。虽然这个
    p.some_class
    是
    div
    的后代，但它不是孩子；这是一个孙子。因此，仅应用其选择器中具有后代组合器的规则。
    

    

    3. 



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




      

      
      
      

      

        

          

            

              
61
投票

              
            

          

        

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



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





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



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





后代选择器（空格）
    

  1. 子选择器 (>) 
    2. 

  2. 相邻兄弟选择器 (+) 
    3. 

  3. 通用兄弟选择器(~)
    4. 

  4. 


注意：
 < 在 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> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>




输出：






有关 CSS 组合器的更多信息

    




      

      
      
      

      

        

          

            

              
14
投票

              
            

          

        

        



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




      

      
      
      

      

        

          

            

              
10
投票

              
            

          

        

        
p
 类的 
some_class
 元素，这些元素是 
div 下的 直接
。

    



      

      
      
      

      

        

          

            

              
6
投票

              
            

          

        

        


（子选择器）是在 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 选择器
    



      

      
      
      

      

        

          

            

              
5
投票

              
            

          

        

        
所有具有 
p
 类的 
some_class
 标签都是 
div
 标签的直接子代。

    



      

      
      
      

      

        

          

            

              
3
投票

              
            

          

        

        
<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
 的直接子级都会获得应用于他们的样式。

    



      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

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



一个例子：



article > p { }



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

    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

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

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.