CSS冲突

Question

我试着做一个简单的:我的所有INPUT元素的焦点效果,如下所示:

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

比具体更具体

INPUT:focus

在CSS中,更具体的规则具有更高的优先级,无论它们被声明的顺序如何.同样具体的规则(通常使用相同数量的选择器),稍后声明的规则将覆盖或添加到首先声明的规则.

对于第二条规则,您可以在边框样式上指定!important,但并不是所有浏览器都支持它(我听过IE吗？)