ホームページ  >  記事  >  ウェブフロントエンド  >  CSS バージョン 2 のメモに精通している ⒈ selector_html/css_WEB-ITnose

CSS バージョン 2 のメモに精通している ⒈ selector_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:22:581127ブラウズ

1. よく使用されるセレクター:

①要素セレクター スタイルを適用する要素を指定します。例: p {color:#fff;}
②子孫セレクター 例: body。 p {color:#ccc;} このセレクターとサブセレクター body>p の違いは次のとおりです: body>p は body の下の子要素であるすべてのノード P を指し、子孫の選択は、body の下のすべてのノード P です。 body は子要素と言えます。セレクターは、特別な種類の子孫セレクターです。

③クラス セレクター .a{color:#ccc;} など、特定のクラス アプリケーション スタイルを指定します。クラス セレクターの名前は、それが何を表すかではなく、何に使用されるかに基づいて付けるのが最善です。ドキュメントに多くの不要なクラスを追加した場合、これはドキュメントが適切に構造化されていないことを示している可能性があります。祖先セレクターの子孫セレクターに基づいて選択するのが最善です。

④ 疑似クラスセレクターは、ドキュメント構造外の他の条件に基づいて要素にスタイルを適用します。例: a:hover{color:red}、:link :visited はリンク疑似クラスと呼ばれ、次の目的でのみ使用できます。アンカー要素、:hover: active :focus は動的疑似クラスと呼ばれ、理論的には任意の要素に適用できます。これらの疑似クラスをカスケードして、より複雑な動作を作成できます。
⑤ ユニバーサル セレクターは、適用できるすべての要素に一致します。スタイル (すべてを選択するのと同じ)。 * で表され、要素のすべての子孫にスタイルを適用したり、子孫の 1 レベルをスキップしたりするために使用できます。
⑥アドバンスセレクターの子セレクター: 前述の通り。
⑦隣接兄弟セレクター 同じ親要素の下にある要素の後の最初の兄弟要素を選択します。 JS の :after のようなエフェクトを選択するものと考えることができます

たとえば、p+div{color:#00f;} はアプリケーション スタイルを実装できます

⑧属性セレクターは、属性の値に基づいて要素を検索できます。 as acronym[title=' practise']{bgc:blue;}スタイルを適用するために練習された title 属性と値を持つ要素を見つけます

ps: スタイルの過度の混乱を避けるために、一般的なスタイルを非常に一般的に保つようにしてください。特別なスタイルは非常に特別です

継承はスタイルが適用される要素を指します。 の子孫はスタイルの一部の属性を継承します。親要素の一般的なスタイルを設定することで、子要素タグの過度の使用を避けることができます。

現在、最も一般的なスタイル シートは、インポート方法よりも高速です。ただし、実際の状況に応じて、ダウンロード速度を大幅に向上させることができます。コードを美しく、混乱させないようにします。 ''s's s s s s s s s s s sul up ha s to

‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ - 1.一般的なスタイル

の⑴

リンク⑸助辅 2. 補助スタイル

⑴表单

⑵通知和错误

⑶ 一致する条目

3.页面结构

⑴标题、页脚、导航

⑵布局

⑶その他页面结构元素

4.页面構成要素

5. カバーリングスタイル

良い習慣の必要性を考慮して配置されています

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。