1

我在许多页面上使用标题 ID，但不希望底部边框仅显示在某些页面上。下面的代码为了简单起见，从标题 ID 中删除了一些样式：

#header {
width:790px;
min-height:230px;
border-bottom: 1px solid #DADADA;
}

.header-no-line {
border-bottom: none;    
}

<div Id="header" class="header-no-line">
<h1>Title</h1>
</div>
4

3 回答 3

0

您的问题在于 CSS 特异性：http ://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

您可以important在您的情况下添加关键字来解决此问题：

.header-no-line {
    border-bottom: none !important; /* <-----  */
}
于 2012-11-29T20:29:52.353 回答
0

好吧，您应该阅读有关特异性的信息。http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/是一篇好文章。

一个好的规则是：

“从 0 开始，样式属性加 1000，每个 ID 加 100，每个属性、类或伪类加 10，每个元素名称或伪元素加 1。”</p>

在这种情况下，ID 值 100，类值 10，因此 ID 获胜。

此外，任何时候你正在“撤消”CSS，这通常是一个不好的迹象。

解决这个问题的垃圾方法是在!important该声明中添加一个，但大多数人会在代码审查中选择它并询问为什么需要它——这很少是做事的方式。

许多人还建议不要对 CSS 使用 ID，而是对所有内容使用类（嗯，除了普通的选择器等），并且只对 Javascript 钩子使用 ID。这是处理事情的好方法。

于 2012-11-29T20:30:33.427 回答
0

你在css中越具体，你的规则就越重要。

例如：

而不是.header-no-line你可以使用

#header .header-no-line { border-bottom:none; }

或者

body #header .header-no-line { border-bottom:none; }

也正如提到的使用!important属性应该可以解决问题。

#header .header-no-line { border-bottom:none !important; }

更新：我完全错过了那.header-no-line不是#header......我上面的代码不起作用。但这将：

body .header-no-line { border-bottom:none !important; }

于 2012-11-29T20:37:13.970 回答