CSS 冲突

Question

我正在尝试为我所有的 INPUT 元素做一个简单的 :focus 效果，就像这样:

INPUT:focus { border-color: orange; }

这很好用，直到我将这段 CSS 添加到样式表中:

.form_container .col2 INPUT
{
border: 2px solid #CCCCCC;
margin:0px 0px 0px 0px;
font-family:arial; 
font-size:14px;
padding:3px;
}

现在，一旦我添加了上面的内容，焦点效果就不会对 form_container 类中的任何输入起作用，当我去掉上面的内容时，它就起作用了。

我可以像这样通过为 INPUT 指定类来使效果起作用:

.form_container .col2 INPUT:focus { border-color: orange; }

但我不明白为什么我必须这样做？我想像在第一个示例中那样控制所有 INPUT 效果

如果有人可以阐明这一点谢谢

Answer 1

那是因为

.form_container .col2 输入

比

更 具体

INPUT:焦点

在 CSS 中，更具体的规则具有更高的优先级，无论它们声明的顺序如何。同样具体的规则(通常有相同数量的选择器y)，后声明的规则覆盖或添加到先声明的规则。

您可以在第二条规则的边框样式上指定 !important，但并非所有浏览器都支持它(我听说 IE 了吗？)