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效果

如果有人可以对此有所了解 THX

Answer 1

那是因为

.form_container .col2 INPUT

比

更具有特定

<强> INPUT:focus

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

你可以在第二条规则的边框样式上指定！important ，但并不是所有浏览器都支持它（我听过IE吗？）

Answer 2

在你的第一条规则中，你宣布了边框颜色。在你的第二条规则中，你要覆盖它。你可以试试像

这样的东西

INPUT:focus { border-color: orange!important; }