Question

为什么以下代码是这样的？

div div {background: #A4CA39}

忽略背景颜色。我从odin项目的android徽标演练中提取了这个。此代码放在css表的顶部。想知道为什么div div而不只是div？

Answer 1

div div匹配另一个div内的所有div元素像这样：

<div>
    <div></div> <-- this one is matched by the CSS rule
</div>

Answer 2

div div { /* style */ }将样式应用于另一个div

内的任何div

Answer 3

想象一下这样的页面：

<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: #999999;
}
div div {
    background: #A4CA39;
    width: 50px;
    height: 50px
}
</style>
</head>

<body>
<div class="outer">
    <div class="inner"></div>
</div>
</body>

div {}规则将适用于外部<div>。 div div {}规则适用于内部规则，并会在较大的灰色方块内创建一个较小的绿色方块。

此处需要jsFiddle进行测试。

Answer 4

div div{}表示以某些样式定位的父div的子div。只有一个div{}表示页面中的所有<div>标记都是样式化的，而不仅仅是子项。因此，对于您当前的代码，背景颜色仅应用于其他div元素中的div元素，而如果它只是1 div，则每个div标记都会具有相同的背景颜色。

这个CSS选择器是什么意思？

4 个答案: