1

私は自分のサイトを作成するために無料のウェブデザインテンプレートの1つを使用しています。テンプレートはcssスタイルシートを使用し、類似した名前を持つ多くの異なるスタイルを定義します。いくつかの新しいスタイルを定義しましたが、問題は新しいスタイルが私のページに影響を与えないことです。たとえば、これはブロックの1つにあるheading2のスタイルです。

 #body .article h2 {
color: #ffaf04;
font-family: Georgia, serif;
font-size: 36px;
font-weight: normal;
letter-spacing: 2px;
line-height: 48px;
margin: 0;
padding: 0 48px;
text-align: center;
    }

このスタイルを追加して使用しようとしています

 .eventTitle { font-size:28px; color:black  }

しかし、私が使用するとき

 <h2 class="eventTitle">something</h2>

#body.articleのスタイルはeventTitleではなく適用されます。

CSSにいくつかの親スタイルの子育てや保護があるのではないか、あるいはいくつかのdivアイテムが特定のクラススタイルなどを使用する必要があるのではないかと思っていました。

事前にすべてのコメントやアイデアに感謝します。

4

3 に答える 3

6

2番目のセレクターは最初のセレクターよりも具体的ではないため、2番目のセレクターがCSSファイルの最初のセレクターの後にある場合でも、最初のセレクターが適用されます。

特異性 について詳しくは、こちら（Chris Coyierによるブログ投稿）とこちら（W3C仕様）をご覧ください。

これは、特異性の概念をほぼ要約した非常に面白い漫画です。

私の提案：最初のセレクターで取り出してみてください#body（そもそもそこにある非常に正当な理由がない限り）。次に、2番目のセレクターをに変更してみてください

.article .eventTitle { font-size:28px; color:black  }

cssコマンドに修飾子を追加することはお勧めしません。!important（@Cody Guldnerが述べているように）慎重に使用する必要があります。本当に、CSSはクリーンで簡潔でなければなりません。たくさん使う!importantことは、将来もっと仕事をするために自分自身を準備することだけです。個人的には、バグ修正と実験にのみ使用しています。

于 2013-01-04T03:16:33.500 に答える
1

eventTitleクラスよりもはるかに具体的であるため、適用されません#body .article h2。クラスのスタイルを次のように変更してみてください。

.eventTitle {font-size：28px！important; 色：黒！重要; }

より具体的なものよりも優先されるように#body .article h2

于 2013-01-04T02:52:00.473 に答える
0

に変更.eventTitle し#eventTitleます。IDは常にクラスをオーバーライドします。要素に同じスタイルの256のクラスがない限り;） http://codepen.io/chriscoyier/pen/lzjqh

！importantを使用することもできますが、お勧めしません。

あなたもこのようなことをすることができます

#body h2, .eventTitle {
font-family: Georgia, serif;
font-weight: normal;
letter-spacing: 2px;
line-height: 48px;
margin: 0;
padding: 0 48px;
text-align: center;
}
.article h2{
color: #ffaf04;
font-size:36px;
}
.eventTitle { font-size:28px; color:black  }

お役に立てれば

于 2013-01-04T02:52:31.130 に答える