CSSセレクターの使い方まとめ

今回はCSSセレクターの使い方と、CSSセレクターを使用する際の注意点についてまとめてお届けします。

CSSセレクター

1.idセレクター #id{ }、「#id」は要素を選択します
2.クラスセレクター.class{ }、「.class名」は要素を選択します
3.タグセレクター p { } , "タグ名" で要素を選択します
4. ワイルドカード セレクター { } , "" ですべての要素を選択します
5. 組み合わせセレクター:
グループ セレクター E、F "," はカンマで区切られ、同時に選択されます E、 F 要素
子孫セレクター E F はスペースで区切られ、E 要素の下にあるすべての F 要素を選択します (F 要素がネストされているレベルに関係なく、それらは選択されます)
直接サブセレクター E > F "> " 開いて、E 要素の下の直接の子要素 ​​F、つまり E 要素の下の第 1 レベルの子要素 ​​F を選択します
隣接兄弟セレクター E + F、"+" は、選択した後、直接隣接を区切りますE 要素 要素 F
一般的な隣接セレクター E ~ F、「~」は選択された E 要素の後のすべての兄弟要素 Fを区切ります
6. 疑似クラス セレクター L-V-H-A,:link,:visited,:hover,: active
7. 擬似要素セレクター
E::first-line は E 要素 content の最初の行を選択します
E::first-letter は E 要素 content の最初の文字を選択します
E::before E 要素の前に content を挿入します
E::after E 要素の後にコンテンツ content を挿入します
前後は追加のコンテンツを挿入できる場所であり、content 属性と一緒に使用する必要があります
8.属性セレクター
input[type="text"] {
width :150px;
}

---

セレクターの優先順位

css セレクター優先順位コア: 各セレクターには独自の優先順位があり、スコープがより具体的であるほど優先順位が高くなります。
CSS の優先順位は高から低まで次のとおりです。
1. 属性の後に ! important を使用すると、ページ上の任意の場所で定義された要素のスタイルがオーバーライドされます。
2. 要素タグにスタイル属性として記述されるインライン スタイル
3.id セレクター
5. 属性セレクター
7. ブラウザのカスタマイズ
CSS スタイル ルールが複数のセレクターで構成される場合、ID セレクターの重みは 1000、クラス セレクターの重みは 100、ラベル セレクターの重みは 10 として合計され、デメリットのレベルによってどちらが優先されるかが決まります。 2 つの CSS ルールの重みが同じ場合、より具体的な方が使用されます。つまり、より高い重みを持つセレクターがより具体的で、より高い優先順位を持ちます。 2 つのセレクター ルールと重みが同じ場合、後のスタイルが前のスタイルを上書きします。
p {color: #333;}
p {color: #666;}
この方法では、p コピーの色は明らかに #666 になります


class と id の使用シナリオ

id は一意の識別子ですページ上では、クラスは次のとおりです。 ページ上の特定のタイプのスタイルを識別するスタイルは普遍的であり、繰り返し使用できます。要素のクラス名は class="intro other" のように記述することができます。つまり、複数のクラス名が存在する可能性があります。これは、2 つのクラス名に対応するスタイルを重ねることを意味します。 ID名をこのように書くことはできません。 ID 名はページ レイアウト (大きなフレームのマーク) でよく使用され、クラスは通常、スタイル定義のためにローカル ページ レイアウトで使用されます。クラス名は名前を付けるときに同じように記述できるため、クラスに対してスタイルを 1 回記述するだけで済みます。 、同じスタイルの要素を再利用できます。

---

CSS セレクターを使用するときに適切な名前空間を区切って、コードの読みやすさを向上させ、メンテナンスを容易にします

---

セレクターの使用例

html
#header{} /*选中id为header的元素*/
.header{}    /*选中class=header的元素*/ 
.header .logo{}  /*选中class=header下的所有class=logo的元素*/ 
.header.mobile{}  /*选中class="header mobile"的元素*/ 
.header p, .header h3{}  /*选中class=header元素下的所有p元素，同时选中class=header元素下的所有h3元素*/ 
#header .nav>li{}  /*选中id=header元素下的所有class=nav元素的直接子元素li*/ 
#header a:hover{}  /*选中id=header元素下的所有a元素，并使用hover伪类*/

---

一般的な擬似クラスセレクター

[1]構造擬似クラスセレクター
E:first-childは、Eが配置されている親要素の下にある最初の子要素と子要素を選択しますそれは E 要素です
E:last-child は E が配置されている親要素の下にある最後の子要素を選択し、子要素は E 要素です
E:root は E が配置されているルート ノードの要素を選択しますHTML では、HTML 要素を選択します
E:nth -child(n) は、E が配置されている親要素の下にある n 番目の子要素を選択します。子要素は E 要素です
E:nth-last-child(n ) E が配置されている親要素の下にある n 番目の子要素を選択します。子要素は E 要素です
E:nth-of-type(n) の要素の中から n 番目の E 要素を選択しますE が存在する親要素の下にある同じ型
E:nth-last-of-type(n) E が存在する親要素を選択 要素
E の下にある同じ型の要素のうち、下から n 番目の E 要素: first-of-type E が存在する親要素の下にある同じ型の要素の中から最初の E 要素を選択します
E:last-of-type E を選択します 親要素の下にある同じ型の要素の中から最後の E 要素を選択します
E:only-child は、親要素内の唯一の子要素と一致します。これは、:first-child:last-child または :nth-child(1): nth-last-child(1)
E:only-of と同等です。 -type は、親要素の下で同じタグを使用する唯一の子要素と一致します。これは、:first-of-type:last-of-type または:nth-of-type(1):nth-last-of-type と同等です。 (1)
E:emptyは子要素を持たず、かつテキストノードを持たない要素と一致します
E:not(F)は現在のセレクターと一致しない要素と一致します
【2】動的擬似-class selector L-V-H-A を並べる
link-visited-hover-active

a:link{
 color:red;
 }
 
 a:visited{
 color:blue;
 }
 
 a:hover{
 color:gree;
 font-size:20px;
 }
 
 a:active{
 color:gold;
 }
 a:focus{
 color:gold; //a元素获得焦点后的样式
 }

:first-child と:first-of-type の役割と違い

E:first-child は要素 E を指定し、最初の E を検索します親要素の下の要素
E: first-of-type は型 E の要素を指定し、親要素の下で型 E の最初の要素を検索します

---

コード例:

html
<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style> 
<p> 
</p><p>aa</p>
<h3>bb</h3>
<h3>ccc</h3> 

.item1 :first-child{color:red;}class=item1 要素の親要素 p の下にある最初の子要素 ​​item1 のフォントは red<h3>bb<h3>ccc</h3> </h3>class=item1 ですが、これらは親要素の下にある最初の子要素ではありません。 .item1:first-child{color:red;}class=item1元素的父元素p下的第一个子元素item1字体红色<h3>bb<h3>,<h3>ccc<h3></h3> </h3> </h3> </h3>虽然class=item1但他们不是其父元素下的第一个子元素。

.item1:first-of-type{background:blue;}class=item1元素的父元素下的同类型元素中的第一个class=item1的元素。<p class="item1">aa</p>

.item1:first-of-type{background:blue;}class=item1 要素の親要素の下にある同じ型の要素のうち、最初の class=item1 要素。 <p class="item1">aa</p> の親要素 p の下にある同じタイプの要素 (p、h3) は、青色の背景を持つ最初の要素、aa、bb をそれぞれ選択します。

---

text-align: center

の役割は、要素内のテキストが水平方向に中央に配置されるように設定します。 text-align はブロックレベル要素 (p または p) に適用されます。 ブロックレベル要素 (p/p) 内のインライン要素
(テキスト、ピクチャ、入力ボックス) の配置を設定できます。

text-alignには、left/right/center/justify/inherit、左揃え/右揃え/中央揃え/両端揃え/親要素の整列値の継承の5つの値があります。両端揃えを行うと、各行の単語の間隔が一定にならない場合があります。

---

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

MySQL データベースへのアクセスが拒否された場合の対処方法

フロントエンド テスト ピラミッドを使用するための詳細な手順

🎜

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