• What does the “>” (greater-than sign) CSS selector mean?

    What is greater-than sign (>) selector in CSS?

    The greater than sign (>) selector in CSS is used to select the element with a specific parent. It is called as element > element selector. It is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent. It looks only one level down the markup structure and not further deep down. Elements which are not the direct child of the specified parent is not selected.

    What does the “>” (greater-than sign) CSS selector mean?

    For example:

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

    What exactly does the > sign mean?

    回答

    > is the child combinator, sometimes mistakenly called the direct descendant combinator.1

    That means the selector div > p.some_class only selects paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within.

    An illustration:

    div > p.some_class { 
    background: yellow;
}
    <div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>
     
    Expand snippet

    What's selected and what's not:

    1. Selected
      This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements.

    2. Not selected
      This p.some_class is contained by a blockquote within the div, rather than the div itself. Although this p.some_class is a descendant of the div, it's not a child; it's a grandchild.

      Consequently, while div > p.some_class won't match this element, div p.some_class will, using the descendant combinator instead.

    1 Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".

    回答2

    > (greater-than sign) is a CSS Combinator.

    A combinator is something that explains the relationship between the selectors.

    A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

    There are four different combinators in CSS3:

    1. descendant selector (space)
    2. child selector (>)
    3. adjacent sibling selector (+)
    4. general sibling selector (~)

    Note: < is not valid in CSS selectors.

    enter image description here

    For example:

    <!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>

    Output:

    enter image description here

    More information about CSS Combinators

    CSS '>' selector; what is it? [duplicate]

    I've seen the "greater than" (>) used in CSS code a few times, but I can't work out what it does. What does it do?

    回答1

    > selects immediate children

    For example, if you have nested divs like such:

    <div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

    and you declare a css rule in your stylesheet like such:

    .outer > div {
    ...
}

    your rules will apply only to those divs that have a class of "middle" since those divs are direct descendants (immediate children) of elements with class "outer" (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.

    div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}
    <div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

    > selects all direct descendants/children

    A space selector will select all deep descendants whereas a greater than > selector will only select all immediate descendants. See fiddle for example.

    div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */
    <div class="a">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

<div class="b">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>
  • 相关阅读:
    C#获取IP信息
    获取百度地图按条件查找的信息
    react中如何实现一个按钮的动态隐藏和显示（有效和失效）
    es6 关于map和for of的区别有哪些？
    js 高级程序设计 第四章学习笔记
    ant design Table合并单元格合并单元格怎么用？
    React中如何实现模态框每次打开都是初始界面
    前端界面布局相关整理之2017
    待改善的代码整理
    cq三期备注说明
  • 原文地址：https://www.cnblogs.com/chucklu/p/14279788.html
Copyright © 2020-2023  润新知