CSSセレクタ学習ノート

CSSは多くの種類のセレクタを提供しており、初心者の頃はなぜこんなに多くのタイプのセレクタを提供しているのか理解できず、初めてページを書くときにラベルにスタイルを追加するたびに新しいclassを書くようになった.その後、このようなメンテナンスはかなり面倒で、多くの属性が部分的に共通していることがわかり、classごとに重複したコンテンツを追加するのは冗長で非効率に違いありません.
学習が進むにつれて、サブエレメントセレクタ、ダイレクトサブエレメントセレクタ、擬似クラスセレクタなど、いくつかのステップアップセレクタの使用を試み始めます.主にclassをできるだけ少なく使い、HTMLドキュメントの読みやすさを向上させたいと考えています(これまで模倣していたページは、ソースコードと比較してHTMLの読み取りやすさが極めて高いことがわかり、印象的でした).
そこで最近作成されたページには、.content > div > div:nth-child(1) > p { }のようなセレクタが大量に書かれています.HTMLの全体構造を先に書いておき、CSSを順番に書いていたので、最初は問題ありませんでした.問題は、比較的複雑な効果を達成するときに発生します.時間が限られていたので、複雑な部分をスキップして、先に後ろを書くつもりでした.その結果、複雑な部分を振り返ると、目的の効果を実現するためにはHTMLドキュメントの構造を調整しなければならないことに気づきます.そして新しいラベルをつけた後、すべてがめちゃくちゃになった.以前は直接サブエレメントセレクタを大量に使用していたため、ドキュメント構造が変更されると、元の「親子」は親子ではなく、元の兄弟間のバックアップも変更される可能性があり、一発で全身を動かす悪果が現れ、修正が面倒になった.
小結
以下はこれまでのCSSセレクタの使用についての個人的なまとめです.

必要がなければidclassセレクタにタイプセレクタを追加して限定してはならない.説明:パフォーマンスとメンテナンスに影響します.例/*good*/#error,.danger-message{font-color:#c 00;}

 /* bad */
 dialog#error,
 p.danger-message { 
     font-color: #c00;
 }

推奨:セレクタのネストされたレベルは3レベル以下で、位置が後ろの制限条件はできるだけ正確である必要があります.(私はこれまでできなかったので大迷惑をかけました)

なるべく後ろ、具体的な位置で使用する:nth-child(){ }セレクタ.説明::nth-child(){ }セレクタは便利であるとともにHTML文書構造に極度に依存しており、セレクタの間で使用する:nth-child(){ }セレクタは、文書構造が変化すると(しかもこれは普通)、深刻な連鎖効果を生じる.例:/*good*/.danger-message>div>p:nth-child(1){font-color:#c 00;}

 /* bad */
 .danger-message > div:nth-child(2) > p:nth-child(1) { 
     font-color: #c00;
 }

idセレクタ設定スタイル解釈をなるべく使わない:再利用性が大幅に低下する.idは、位置決めおよびjsにより多く使用される.

複数のサブラベルスタイルが同じである場合、親ラベルにclassを設定し、コードをより簡潔にすることができる.例:HTML:

  /* good */
 

     
some content
     
some content
     
some content
     
some content
 

 

     
some content
     
some content
     
some content
     
some content
 

以上、最近CSSを書いているときにCSSセレクタを使っていることをまとめましたが、どうしても足りないところがあるので、勉強を続けて進歩しましょう.