CSS'>'选择器；它是什么？\[重复\]

css CSS

西里猿LEY

2020-03-17

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?

第1934篇《CSS'>'选择器；它是什么？\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
小卤蛋神乐L 2020.03.17

这是CSS子选择器。例：

div > p 选择所有属于div直接子项的段落。

看到这个

飞云Tony 2020.03.17

它声明了父引用，请看此页面的定义：

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

伽罗小哥 2020.03.17

>选择所有直接后代/孩子

空格选择器将选择所有深度后代，而大于>选择器将仅选择所有直接后代。例如参见小提琴。

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>

阿飞小卤蛋达蒙 2020.03.17

意思是父母/孩子

例：

html> body

就是说身体是html的子代

检出：选择器

斯丁Tony泡芙 2020.03.17

这是一个子选择器。

当一个元素是某个元素的子元素时，它将匹配。它由两个或多个以“>”分隔的选择器组成。

例子）：

以下规则设置了BODY子级的所有P元素的样式：

body > P { line-height: 1.3 }

例子）：

以下示例结合了后代选择器和子选择器：

div ol>li p

它匹配作为LI的后代的P元素；LI元素必须是OL元素的子元素；OL元素必须是DIV的后代。请注意，“>”组合器周围的可选空白已被省略。

Itachi小卤蛋凯 2020.03.17

正如其他人所说的，这是一个直系孩子，但是值得注意的是，这与只留一个空格是不同的……空格适用于任何后代。

<div>
  <span>Some text</span>
</div>

div>span会与此匹配，但不会与以下匹配：

<div>
  <p><span>Some text</span></p>
</div>

为此，您可以执行div>p>span或div span。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

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