“>”(大于号)CSS选择器是什么意思?

CSS

小胖A

2020-03-18

例如:

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

这个>标志到底是什么意思?

第2115篇《“>”(大于号)CSS选择器是什么意思?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
番长凯 2020.03.18

它匹配p与类元素some_class直接div

卡卡西乐逆天 2020.03.18

> (大于号)是CSS组合器。

组合器可以解释选择器之间的关系。

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

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

  1. 后代选择器(空格)
  2. 子选择器(>)
  3. 相邻的兄弟选择器(+)
  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组合器的更多信息

蛋蛋卡卡西 2020.03.18

(子选择器)在css2中引入。div p {}选择div元素之后的所有p个元素,而div> p仅选择子p个元素,而不选择大子,大子等等。

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

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

有关CSS Celector及其用法的更多信息,请查看我的博客, css选择器css3选择器

null 2020.03.18

正如其他人提到的,它是一个子选择器。这是适当的链接。

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

Vicky 2020.03.18
html
<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都会将样式应用于它们。

Mandy古一 2020.03.18

p具有class的所有标签some_class都是标签的直接子div

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android