CSS 中的 > 是什么意思？

【问题标题】：What does > in CSS mean?CSS 中的 > 是什么意思？
【发布时间】：2014-05-30 22:33:38
【问题描述】：

在 IUI css 文件中，它们使用以下选择器：

body > *:not(.toolbar)
body > *[selected="true"]

>、*:not() 和 *[] 是什么意思？

谢谢。

【问题讨论】：

如果我们必须跳过谷歌可以回答的问题，我们不会回答任何问题。我们在这里收集和打磨，而不仅仅是制作原创内容。
What does ">" mean in CSS rules? 的可能重复项

标签： css css-selectors

【解决方案1】：

> 表示“is a child element of”。所以body > *:not(.toolbar) 匹配*:not(.toolbar) 是body 的孩子。

*:not(.toolbar) 匹配任何不具有.toolbar 类的元素。

*[selected="true"] 匹配任何具有selected 属性等于true 的元素。

请记住，最后两个（*:not() 和 *[] 是 CSS3 spec 的一部分，您通常不能依赖它们来实现跨浏览器 CSS 兼容性。但是，WebKit 完全支持它们这就是 iPhone（以及随之而来的 iUI）所使用的。

【讨论】：

> 表示“是”的子元素 - 这是直接子元素还是层次结构中的任何子元素？即

还会匹配吗？
仅限直接子级。 “任何孩子”将被称为“后代”，而不是“孩子”。哦，不客气。 =)
太好了，这就是我的问题。干杯

【解决方案2】：

> 表示直系子女
* 是一个通用选择器（一切）
:not() 表示括号中的内容以外的任何内容
*[] 表示与括号中的内容匹配的任何内容

在你的情况下：

body > *:not(.toolbar)   // means any element immediately under the body tag that isn't of class .toolbar
body > *[selected="true"]    // means any element immediately under the body tag where the selected attribute is "true"

> 和 * 在 CSS 2.1 规范中定义。 :not 伪类和 [] 选择器在 CSS 3 规范中定义。

请参阅：http://www.w3.org/TR/CSS21/selector.html 和 http://www.w3.org/TR/css3-selectors/ 了解更多信息。

【讨论】：

【解决方案3】：

> - 子选择器

即
```
div > p > b {
 font-size:100px;
}
```
这将选择p标签内div标签内的所有b标签。
:not(..) - 不是选择器

匹配页面上不符合 not 语句括号中条件的任何元素。即
```
div:not(.toolbar)
```
将匹配任何没有类工具栏的 div
[attr='val'] - 属性选择器

这匹配属性与指定值匹配的任何元素。例如，如果您想让所有选中的复选框都变为红色。
```
input[checkec='true'] {
  background-color:red;
}
```

您应该使用 Google CSS 2.1 选择器了解更多信息。

【讨论】：

【解决方案4】：

表示子元素

.cont > div {
    color: #fff;
}

这将是：

<div class="cont">
    <!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS 
         It only affects the below div. Not the p.
         so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
    <div>jabberwocky</div>
    <p>lorem ipsum</p>
</div>

【讨论】：