1. CSS の順序

まず、ブラウザが CSS を読み取る方法は上から下にあると述べられています。通常、CSS を記述すると、要素にこれらの属性があれば目的の効果が得られますが、これは将来のメンテナンスやブラウザの表示効率に一定の影響を及ぼします。では、CSS の順序はどのように記述すればよいでしょうか。特定の規範はありますか?

まず、CSSのプロパティは特性に応じていくつかのカテゴリに分類されることがわかります。

1. 表示、位置、フロートなどの要素の特性を指定します。これらの属性によってレイアウトが決まります。メソッド

2. 要素を指定する行の高さ、マージン、パディング、幅、高さなど、占有スペース、これらの属性は要素のサイズと位置を決定します

3. を指定しますフォントサイズ、色、背景などの要素自体の効果は、これらの属性によって要素の効果が決まります

実際、CSSの属性を分類すると、明らかな答えが得られることが想像できます。例として、css を使用して自分が書いた順に要素を描画します

p.detail {
  font-size: 10px;
  line-height: 12px;
  width: 30px;
  height: 30px;
  display: inline;        
}

説明: これは、フォント サイズ 10px、行の高さ 12px、幅 10px の要素です。サイズは 30 ピクセル、高さは 30 ピクセル、表示モードはインライン スタイルです

属性の読み取りを開始すると、要素の特性と表示モードがわからないため、要素を配置するのは困難になります。最後の行を読んでみると、これはインライン要素であり、幅と高さの定義が無効になるため、この CSS の記述順序は推奨されません

p.detail {
  display: inline-block;
  margin-top: 20px;
  width: 100%;
  height: 20px;
  color: #fff;
  font-size: 10px;
}

説明: これは要素であり、表示メソッドですinline-block、高さ20px、幅は親要素と同じ、高さは20pxです。この書き方は、簡単にレンダリングできます。要約: CSS を記述する際の推奨仕様は、最初に要素の表示特性に影響を与える属性を記述し、次に要素の位置に影響を与える属性を記述し、最後に要素の内部属性を記述することです

2. クリックまたはホバーすると、CSS の書き込みがハイライト表示されます

マウスをホバーすると、多くの場合、変更が必要な要素にアクティブなクラス名を追加し、変更する必要がある属性をアクティブで書き込みます

例:

.content {
  background: black;  
}
.active {
  background: white;
}

ログイン後にコピー

要素をクリックすると、.content の背景色を黒から白に変更する必要があります。その後、アクティブなクラス名を .content に追加すると、期待される効果が得られます。クリック時に要素の属性だけを変更するだけではありません。 この状況では、.click というクラス名を持つ要素をクリックしたときに、要素のアイコン フォントとスパン要素が変更された場合はどうすればよいでしょうか。これで期待通りの効果が得られますが、要素が 3 つ以上ある場合は、さらに多くのコードが必要になります。実際、注意深い友人は、私がここに .parent タグを持っていることを発見したかもしれません。親タグにアクティブなクラス名を追加するコードは次のとおりです。

<div class="parent">
	<div class="icon-font"></div>
	<span class="text"></span>
</div>
<div class="click"></div>
<style>
　　.icon-active{
　　　　font-size: 40px;
　　}
　　.text-active{
　　　　color: red;
　　}
</style>
<script src="jquery.js?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$(&#39;.icon-font&#39;).addClass(&#39;icon-active&#39;);
　　　　$(&#39;.text&#39;).addClass(&#39;text-active&#39;)
　　})
</script>

この場合。 、変更する CSS 要素に最も近い最も外側のレイヤーにアクティブなクラス名を追加し、次のようにクラス名の下にある子孫要素のスタイルを設定するだけです。アクティブなクラスを追加するだけです。目的の効果を達成するために名前を付けます