2

このテクニックが何と呼ばれているかはわかりません。使用されているのを見ただけです。これは、同じセレクターを CSS で再利用する方法です。

たとえば、私が作成した場合

 h1  { 
      font-size:18px; 
      color:#FFFFFF; 
      font-family:Arial, Helvetica;margin:0;
      padding:0;
}

h2  { 
          font-size:18px; color:#000000; 
          font-family:Arial, Helvetica; 
          font-weight:normal;margin:0;
          padding:0;
}

次のようなもので h セレクターを再利用できます

.whatever h1 {
    color: #000; 
    font: 2.0em arial, sans-serif; 
    background-color: #fff3ea; 
    margin: 50px 0px 0px 50px; 
}

.whatever h2 {
    color: #000; 
    font: 1.7em bold arial, sans-serif; 
    background-color: #fff3ea; 
    margin: 25px 0px 25px 75px;
}

h1とh2が呼び出されたもの内にある場合div、それらはそれらのプロパティを想定します。IDタグとクラスタグでこれを行うことができますが、これがどのように行われたかを覚えていません。

何かご意見は？

4

2 に答える 2

4

これは特異性と呼ばれます。

これは CSS の重要な機能であり、より具体的なセレクター ( ) のプロパティが、より具体的でないセレクター ( .whatever h1) のプロパティをオーバーライドすることを意味しますh1。ページ上のほとんどの要素 (たとえば、すべての要素) の一般的なスタイルを設定し、たとえば、別の要素内の要素h1のみを識別するより具体的なセレクターを使用して、これらの要素の小さなサブセットのプロパティを変更できます。h1そのクラスはwhatever:

HTML

<h1>I'm green with envy</h1>

<h1>And so am I</h1>

<div class="whatever">
    <h1>Because I'm rather special</h1>
</div>

CSS

h1{
    color: green;
}

.whatever h1{
    color: blue;
}

結果

より具体的なセレクターの結果

CSS セレクター.whatever h1は、「任意h1のクラスを持つ別の要素内の任意の要素」を意味します。h1同じ効果を得るために、要素に独自のクラスを与えることもできます。h1対象となる要素が独自のクラスを持っているという事実を反映するために、CSS をわずかに異なる方法で記述するだけです。

HTML

<h1 class="whatever">I'm special</h1>

CSS

h1.whatever{
    color: blue;
}

クラスと ID には、色やその他の属性ではなく、ページ内での要素の役割を示す意味のある名前を付けるようにしてください。つまり、".bigredtext" や ".whatever" の代わりに ".introduction" を使用する方がはるかに優れています。そうすれば、イントロ テキストの色を明るい青に変更すると、CSS と HTML でクラスの名前を変更する必要がなくなり、HTML のすべてが読みやすくなります。(これは、人々が「セマンティクス」と「セマンティック命名規則」に言及するときに話していることです。)

特異度の決定方法 (覚えておくべき簡単なルール)

ユーザー エージェント (Web ブラウザー) は、数式を使用して、各セレクターがどの程度具体的で、どのセレクターが他のセレクターよりも優先されるかを計算します。非常に簡単に言えば、あまり具体的でないものからより具体的なものまで:

  • 要素の名前のみを持つセレクター (例: h1) は、すべての中で最も具体的ではありません
  • を持つ.classセレクターは、クラスのないセレクターよりも具体的です
  • のセレクターは、 の#idセレクターよりも具体的です。.class
  • スタイルシートの下部にあるセレクターは、以前の同一のセレクターよりも優先されます

これらは、特異性について学ぶ価値のある 4 つの主なルールであり、ほとんどの単純なユース ケースをカバーします。これらの 2 つの追加ルールは特異性とは関係ありませんが、知っておく価値があります。

  • などのインライン スタイルは、外部スタイルシートまたは内部タグ<h1 style="color: blue">で個別に宣言された外部ルールよりも優先されます。<style>おそらくインライン スタイルを使用するべきではありませんが、インライン スタイルに遭遇した場合に備えて、これを知っておくことは価値があります。
  • フラグを使用するセレクター内のプロパティは!importantすべてを「打ち負かし」、無視することはできません。同様に、おそらくフラグの使用を選択すべきではありません!importantが、強制される場合もあります。

特異度が実際にどのように決定されるか (それを正確に計算する方法)

もちろん、クラス、ID、および要素を連鎖させ始めると、上記よりも少し複雑になります (ただし、それほど複雑ではありません)。そのため、直感だけで作業するのではなく、特異性を正確に計算する方法を学ぶことが役立ちます。 、スタイルシートが大きく複雑になると、多くの時間を節約できます。

詳細を知りたい場合は、Smashing Magazine に「CSS の特異性と継承」というタイトルの記事があり、一見の価値があります。これらは Andy Clarke の有名なStar Wars Chartを参照しています。これは、Star Wars に精通している場合は具体性を視覚化する簡単な方法かもしれませんが、そうでない場合はおそらくさらに混乱を招くだけです! (下の画像をクリックすると、Andy のサイトで詳細を読むことができます。)

アンディ・クラークのスター・ウォーズチャート

于 2012-09-21T15:08:48.863 に答える
0

セレクターのオーバーライドに直面しました。

例：

<div class="one">
     <div id="two">
          <h1> This is H1 text </h1>
     </div>
</div>

H1 を FFF に設定しました。

h1 {
   color:#fff;
}

ここで、最初のオーバーライドを行います ( ID を使用):

div#two h1 {
   color:#888;
}

3番目に、現在の要素を配置する必要がないことに注意してください。特定のクラスの各要素に設定できます。

.one div#two h1 {
   color:#000;
}

そのため、最終的にテキストの色は黒になります。

生のものは「グローバル」スタイリングを設定することです。ネストされたものは、特定の要素に正確なスタイルを与えることです。

また、チェーン クラス/ID セレクターを使用して、スペースなし<div id="one" class="two three four">で選択することもできます。div#one.two.three.four

于 2012-09-21T15:01:44.627 に答える