如何创建那些“更强”的css类元素？

Question

我有一个关于css类和元素的问题。说我有form input[type=submit] {...}

之类的东西

现在在一个页面上我想添加一个提交按钮，但外观不同。所以我创建了一个类form .button，并将class="button"添加到提交按钮。现在的问题是form input[type=submit] {...}的设置似乎更强，因此具有类的按钮看起来相同。我怎么能解决这个问题？

Answer 1

您应该使用：

form input[type=submit] {
    border: 3px solid red
}
form input.button {
    border: 3px solid blue
}

请参阅： http://jsfiddle.net/5pbbD/

这个问题与CSS特性有关。请参阅this article和the CSS spec。

• form input[type=submit]具有比form .button更高的特异性，因此这就是您遇到此问题的原因。
• 我已将第二个选择器（form .button）更改为form input.button，这已足够具体了。我的答案中的两个选择器实际上具有相等的特异性，因此它归结为它们被定义的顺序。

Answer 2

这完全是关于CSS selector specificity。轻松解决您的问题：

form input[type=submit].button {
    /* ... */
}

请 不要只使用!important。

Answer 3

如果使用！important，即

标记类中的属性

.button
{
  width: 100px !important;
}

这可以做你想要的。

Answer 4

这是关于特异性的。 form input[type=submit]更具体，因此会覆盖一个类。如果你在你的元素上使用id，它将更具体，因此将覆盖你的一般规则。

form #submitButton {
    /* strongly specific rules */
}

Answer 5

为什么不使用，

form input[type=submit].button,
form .button {...}

Answer 6

将一个类分配给您想要不同的按钮，并将有关其他按钮的CSS更改为“除了具有此类的按钮之外的所有内容”。您可以了解如何执行此操作here。

Answer 7

使用!important css指令