CSSセレクターとは何ですか? CSSセレクターとは何ですか?

この記事では、CSS セレクターとは何かについて説明します。 CSSセレクターとは何ですか?困っている友人は参考にしていただければ幸いです。

W3School オフライン マニュアル (2017.03.11 バージョン) ダウンロード: https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A

セレクターは、変更される要素を参照します。 CSS で一般的に使用されるセレクターには、 HTML セレクター、クラス セレクター、ID セレクター があります。

HTML セレクター

最も一般的な CSS セレクターは要素セレクターです。言い換えれば、ドキュメントの要素は最も基本的なセレクターです。

HTML のスタイルを設定する場合、セレクターは通常、p、h1、em、a などの HTML 要素、または HTML 自体になります。

例:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

ある要素から別の要素にスタイルを切り替えることができます。

上記の段落テキスト (h1 要素の代わりに) をグレーにすることに決めたとします。 h1 セレクターを p に変更するだけです。

html {color:black;}h2 {color:silver;}

クラス セレクター

W3C 標準では、要素セレクターはタイプ セレクターとも呼ばれます。

「タイプ セレクターは、ドキュメント言語要素タイプの名前と一致します。タイプ セレクターは、ドキュメント ツリー内のその要素タイプのすべてのインスタンスと一致します。」

形式は次のとおりです:

selector.classname{
　　　　property1:valu;
　　　　property2:valu;
　　　　……
　　}

例:

p.left {font-family: sans-serif;}

id ​​セレクター

要素を個別にスタイルする必要がある場合は、id セレクターを使用できます。 ID セレクターは最初にデザイン スタイルのオブジェクトの ID 値を定義する必要があり、異なる要素の ID 値を繰り返すことはできません。

例:

<p id="top"></p>

トップのスタイルを定義:

#top{
　　property1：value;
　　property2：value;
　　……
}

html

76c82f278ac045591c9159d381de2c57
3d5001d4a74c4b681850f519bcffe8a9
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7CSS 常用选择器6e916e0f7d1e588d4f442bf645aedb2f
269ba738a29aafb66c6db71e97931089
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

8fcb895fbf6702c912ece3f561682883
4a249f0d628e2318394fd9b75b4636b1HTML选择器473f0a7621bec819994bb5020d29372a
1543e05224819c12ab8136df28db3a2ecss test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

0923.css

h1{
    color: yellow;
}

#p1{
    color: aqua;
    font-size: 20px;
}
.p2{
      color: red;
      font-size:40px;
}

要約: 上記この記事の内容全体が、皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS 基本ビデオ チュートリアル 、 CSS3 ビデオ チュートリアル 、bootstrap ビデオ チュートリアル をご覧ください。

以上がCSSセレクターとは何ですか? CSSセレクターとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。