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

さて、あなたは特異性について読むべきです。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 の特異性にあります: 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

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 に答える