CSSセレクター

CSS セレクター

【ワイルドカード セレクター】

* スター セレクターはページ上のすべての要素と一致しますが、製品コードでは決して使用しないことをお勧めします。ブラウザに不必要な負荷がかかります。

*{

margin:0;

padding:0;

}

[タグセレクター] (タイプセレクターとも呼ばれます): つまり、HTML タグ名をセレクターとして使用します

デモ: ul {}

[id セレクター]: ID セレクターは注意して使用する必要があります。

必要なスタイルタグの ID 名をカスタマイズします。次に、CSS ファイルに #custom id name {CSS style} を記述します。

#IDname {width: 960px; auto;

ID セレクターは一意であり、再利用は許可されていません。可能であれば、最初にタグ名、新しい HTML5 要素、または疑似クラスを使用してみてください。

【クラスセレクター】(class)

クラス名のカスタマイズ、使い方: cssファイルに .class name {css style}.

.className {border-color: font-size:16px; と書きます。 }

注: 1 つのラベルは複数のクラス名を使用でき、1 つのクラス名は複数のラベルで使用できます。

IDとクラスの違い

IDセレクター、ID名は一度のみ使用でき、繰り返すことはできません。 getElementById('')

クラス セレクターでは、クラス名を繰り返し使用できます。たとえば、ページ内の複数の要素で同じスタイル定義を使用できます。

[グループセレクター]: 複数のタグを同時に制御します。タグ名は

a,p,span{} で区切られています

[結合セレクター]: タグ名、ID 名、クラス名を組み合わせて一致させることでスタイルを選択して追加することもできます

p .p {} すべてを表しますp ラベルの下にクラス p を持つラベル。

p,#a {} は、ID a のタグとすべての p タグを表します。

[関係セレクター]: 関係セレクターは、

セレクター名 説明 バージョン 英語名

E F 含まれるセレクター E 要素に含まれるすべての F 要素を選択します。 CSS1 (Descendant combinator) は、子孫セレクターとも呼ばれます。

E>F 子セレクターは、E 要素であるすべての子要素 ​​F を選択します。 CSS2(子コンビネーター)

E+F隣接セレクターは、E要素の直後のF要素を選択します。 CSS2 (隣接兄弟コンビネータ)

E~F 兄弟セレクタは、E 要素のすべての兄弟要素 F を選択します。 CSS3 (一般的な兄弟コンビネータ)

[擬似クラス セレクター]

すべてのタグが擬似クラス セレクターを使用できるわけではありません。ここでは、a タグの擬似クラス セレクターについてのみ説明します

a:link {color: #FF0000; text-decoration: none}         //未访问的链接
a:visited {color: #00FF00; text-decoration: none}     //已访问的链接
a:hover {color: #FF00FF; text-decoration: underline}   //鼠标在链接上
a:active {color: #0000FF; text-decoration: underline}  //激活链接

。 ✪注意: 上記の疑似クラスを 1 つ以上作成できます。ただし、順番に書かないと問題が発生します。

セレクター バージョン バージョン 説明

E:link CSS1 アクセスされる前にハイパーリンクのスタイルを設定します。

E:visited CSS1 リンクアドレスが訪問されたときのハイパーリンクのスタイルを設定します。

E:hover CSS1/2 マウスをホバーしたときの要素のスタイルを設定します。

E:active CSS1/2 ユーザーによって要素がアクティブ化されたとき (マウスのクリックとリリースの間に発生するイベント) のスタイルを設定します。

E:focus CSS1/2 要素が入力フォーカスになったとき（要素のonfocusイベントが発生したとき）のスタイルを設定します。

E:lang(fr) CSS2 特別な言語を使用して E 要素と一致します。まれに使用されます

E:not(s) CSS3 は、s セレクターを含まない要素 E と一致します。

E:root CSS3 ドキュメントのルート要素の E 要素と一致します。多くの場合、HTML 要素を指します

E:first-child CSS2 は、親要素の最初の子要素 ​​E と一致します。

E:last-child CSS3 親要素の最後の子要素 ​​E と一致します。

E:only-child CSS3 親要素の唯一の子要素 ​​E と一致します。

E:nth-child(n) CSS3 親要素の n 番目の子要素 ​​E と一致します。

E:nth-last-child(n) CSS3 親要素の下から n 番目の子要素 ​​E と一致します。

E:first-of-type CSS3 同じ型の最初の兄弟要素 E と一致します。

E:last-of-type CSS3 同じ型の最後の兄弟要素 E と一致します。

E:only-of-type CSS3 同じ型の唯一の兄弟要素 E と一致します。

E:nth-of-type(n)    　CSS3    匹配同类型中的第n个同级兄弟元素E。

E:nth-last-of-type(n) CSS3    匹配同类型中的倒数第n个同级兄弟元素E。

E:empty              　　 CSS3    匹配没有任何子元素（包括text节点）的元素E。

E:checked            　　CSS3    匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:enabled            　　 CSS3    匹配用户界面上处于可用状态的元素E。

E:disabled           　　 CSS3    匹配用户界面上处于禁用状态的元素E。

E:target               　　 CSS3    匹配相关URL指向的E元素。

 

  ★first-child 与first-of-type的区别：

举例：

4533d610cdb8960dc10af1294aeeedba
e388a4556c0f65e1904146cc1a846bee第一个子元素94b3e26ee717c64999d7867364b1b4a3
4a249f0d628e2318394fd9b75b4636b1第二个子元素473f0a7621bec819994bb5020d29372a
45a2772a6b6107b401db3c9b82c049c2第三个子元素54bdf357c58b8a65c66d7c19c8e4d114
45a2772a6b6107b401db3c9b82c049c2第四个子元素54bdf357c58b8a65c66d7c19c8e4d114
94b3e26ee717c64999d7867364b1b4a3

语法说明：

p:first-child  　　　　  匹配到的是p元素,因为p元素是p的第一个子元素；

h1:first-child  　　　　匹配不到任何元素，因为在这里h1是p的第二个子元素，而不是第一个；

span:first-child  　　   匹配不到任何元素，因为在这里两个span元素都不是p的第一个子元素；

p:first-of-type  　　　　匹配到的是p元素,因为p是p的所有为p的子元素中的第一个，事实上这里也只有一个为p的子元素；

h1:first-of-type  　　   匹配到的是h1元素，因为h1是p的所有为h1的子元素中的第一个，事实上这里也只有一个为h1的子元素；

span:first-of-type  　　匹配到的是第三个子元素span。这里p有两个为span的子元素，匹配到的是第一个。

所以，通过以上两个例子可以得出结论：

:first-child 　　   匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 　　匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

✪注意：当然这些元素的范围都是属于同一级的，也就是同辈的。

同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。

【属性选择符】

选择符         　　　　　版本   　　描述

E[att]               　　CSS2  选择具有att属性的E元素。

E[att="val"]    　　 CSS2  选择具有att属性且属性值等于val的E元素。

E[att~="val"] 　　 CSS2  选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

E[att^="val"] 　　 CSS3  选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"] 　　 CSS3  选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"]  　　CSS3  选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"]  　　 CSS2  选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

【伪对象选择符】

选择符                              　　　　版本     描述

E:first-letter/E::first-letter  　CSS1/3  设置对象内的第一个字符的样式。

E:first-line/E::first-line       　CSS1/3  设置对象内的第一行的样式。

E:before/E::before　　　　　　CSS2/3  设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

E:after/E::after                 　　CSS2/3  设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

E::placeholder                   　   CSS3    设置对象文字占位符的样式。

E::selection                     　　  CSS3    设置对象被选择时的颜色。    

 

✪注意：CSS3的语法改成:: ,原本CSS1是: ,故还是直接用两个冒号为妥。

举例：

html：

<input type="search" placeholder="测试">

css:

input::-webkit-input-placeholder {color: green;}

 

更多CSS选择符 相关文章请关注PHP中文网！