为什么背景颜色是红色？（如何决定哪条css规则获胜）

我只是在玩css来学习。我无法理解为什么我的背景颜色是红色，而我希望它是绿色或黄色

CSS Html

红色

演示

---

我正在寻找原因，为什么会发生这种情况，而不是修复使div的背景色变为黄色或绿色。

我假设您希望用绿色覆盖红色div背景，在这种情况下，您需要用

覆盖此红色div！重要信息

css属性

---

正文>div比

div

更具体，你可能不得不这样写：

body > div
{
    background-color:red;
}

body div
{
    background-color:yellow;
}

或者为该

div

.yellow{
        background-color:yellow;
    }

.red
{
    background-color:red;
}

div.red
    {
        background-color:pink;/*more specify than only class red*/
    }

那条规则更具体 例如：

div{
        background-color:yellow;
    }

define

class

比only

div

.yellow{
        background-color:yellow;
    }

.red
{
    background-color:red;
}

div.red
    {
        background-color:pink;/*more specify than only class red*/
    }

---

“>”表示第一个标记的任何子项，例如“body>div”表示“body”中的所有样式都将传递到“div”

在不使用“>”和命名div的情况下玩一玩（参见上面的jsfiddle）。命名你的div会让你有更多的控制权。

一个词“专一性”，这在css中非常重要，这里有一个很好的资源可以学习

---

我想

body>div

比

div

更具体