为什么css写的顺序对我的设计有所影响

Question

在我的CSS中,我有以下内容:

.myDiv{
    float:left;
    width:100px;
    height:100px;
}

.yellow{
    background:#faf8c7;
}

.lightGrey{
    background:#f8f8f8;
}

在我的HTML中

<div class="myDiv lightGrey yellow"></div>

这应该显示div为黄色,但它是lightGrey.如果我在我的CSS(而不是HTML)中更改.yellow和.lightGrey的顺序,那么它div变成黄色......为什么会这样？

当然,它应该是HTML中编写的类的顺序,它确定div是黄色还是灰色.CSS的顺序应该是无关紧要的.

Answer 1

当然它应该是在html中编写类的顺序,它确定div是黄色还是灰色

这是级联的定义方式:

1. 查找适用于目标媒体类型的相关元素和属性的所有声明.如果关联的选择器与相关元素匹配且目标媒体与包含声明的所有@media规则上的媒体列表以及到达样式表的路径上的所有链接匹配,则声明适用.
2. 根据重要性(正常或重要)和来源(作者,用户或用户代理)进行排序.按升序排列:
   1. 用户代理声明
   2. 用户正常声明
   3. 作者正常声明
   4. 作者重要的声明
   5. 用户重要的声明
3. 通过选择器的特异性对具有相同重要性和原点的规则进行排序:更具体的选择器将覆盖更一般的选择器.伪元素和伪类分别被计为普通元素和类.
4. 最后,按指定的顺序排序:如果两个声明具有相同的权重,来源和特异性,则后者指定获胜.导入样式表中的声明被认为是在样式表本身中的任何声明之前.

#4是你正在努力的部分,声明具有相同的特异性,因此后者正在获胜.