2

以下のコードを参照してください。クラス<h1>を使用したいのですが、.page-header h1#main h1

変更せずにそれを防ぐ方法は#main h1？

<div id='main'>
 <div class="page-header">
        <h1>This is a title</h1>
 </div>
</div>

css

#main h1 {
 line-height: 30px;
 font: 28px Arial, Helvetica, sans-serif;
 color: #333;
 font-weight: 300;
}

.page-header h1 {
    color: white;
    font-size: 28px;
    line-height: 20px;
    margin: 12px 0 11px 11px;
}
4

3 に答える 3

4

より具体的なセレクターが必要です。2番目のルールのセレクターを次のように変更します。

#main .page-header h1

各セレクターの特異性の値を比較します。

#main h1               0101
.page-header h1        0011
#main .page-header h1  0111  <-- Winner!
于 2012-08-14T02:28:16.057 に答える
1

あなたはbfavarettoが答えたようにあなたの特異性を増やすことができます、あるいはあなたはあなたの特異性を減らすことができます。これは特にタグの場合に当てはまります。多くの人（私のように）は、Webページにタグをh11つだけ置くべきだという意見を持っています。h1そのような見方を保持すると、削減は明らかに次のようになります。

h1 { all your properties }

上記は複数のh1タグで使用することもできますが、それらすべてがとにかく存在すると仮定すると#main（その場合は#main h1不要です）、組み合わせクラスに特定のスタイルがある場合は、単純な定義がオーバーライドされます。.page-header h1h1

于 2012-08-14T02:42:05.557 に答える
0

ねえ今あなたはこれを行うことができます

#main .page-header h1 {
    color: white;
    font-size: 28px;
    line-height: 20px;
    margin: 12px 0 11px 11px;
}

なぜなら

ID値はクラスとタグの例以上のものです

#mainこれはidであり、これは値です100

H1これはHTMLタグであり、この値は1

.page-headerこれはクラスであり、この値は10

次に、値に従ってcssを慎重に定義します。

于 2012-08-14T04:34:30.980 に答える