CSS类覆盖不只为一个特定的类工作

Question

在我的Wordpress CSS中，我添加了一些额外的类。根据屏幕宽度，我想覆盖这些。这很好，除了一个类。我已经无计可施了到底是什么原因。下面是代码摘录(class "field-space")正在被成功重写，类formflex"不是)

.formflex {
display: flex;
background-color:yellow;
}
.field-space {
padding-right: 20px;
background-color:lightgrey
}
@media only screen and (max-width: 767px) {
    .formflex {
       ! flex-direction : column;
background-color:blue;
    }
.field-space {
padding-right: 60px;
background-color:green;
}
}

background-color规范是用来测试事物是否工作的。带有字段空间的元素的颜色会改变，而用于formflex的元素则不会。我是不是漏掉了一些错别字(检查了一千遍)?

已通过Firefox和Chrome测试。

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/important

!分隔符后跟重要关键字，标志着声明同样重要的。重要标志改变规则选择级联中的声明。不重要的声明

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

专一性是浏览器用来确定CSS的算法与元素最相关的声明，反过来，确定要应用于元素的属性值。的特异性算法计算CSS选择器的权重以确定哪个

只是为了澄清一下，因为您的文字显示了一些混乱，您覆盖了单个css属性的特异性，而不是整个类。这些是应用于响应给定选择器的元素的规则集。顺便说一句，你做错了……

…由于这里不需要重写任何特异性，因此不需要!important子句。

作为旁注，.field-space元素在垂直显示时需要设置height。

.formflex {
display: flex;
background-color: yellow;
}
.field-space {
padding-right: 20px;
background-color: lightgrey
}
@media only screen and (max-width: 767px) {
.formflex {
flex-direction: column;
background-color: blue;
}
.field-space {
padding-right: 60px;
background-color: green;
line-height: 1em;
height: 1em;
}
}
.formflex > *:not(.field-space){
border: solid 1px gray;
}

<div class="formflex">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div class="field-space"></div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>