CSS-Selektoren

CSS-Selektoren

[Wildcard-Selektoren]

* Der Stern-Selektor stimmt mit jedem Element auf der Seite überein, ich empfehle jedoch, dass Sie ihn niemals im Produktionscode verwenden. Es belastet den Browser unnötig.

*{

margin:0;

padding:0;

}

[Tag-Selektor] (auch Typ-Selektor genannt ): Das heißt, verwenden Sie den HTML-Tag-Namen als Selektor

demo: ul {}

[id selector]: ID-Selektoren sollten mit Vorsicht verwendet werden.

Passen Sie den ID-Namen für das erforderliche Stil-Tag an. Schreiben Sie dann #custom id name{CSS style} in die CSS-Datei. Hinweis: Jeder ID-Name muss unterschiedlich sein.

# IDname {width : 960px; margin: auto; }

Der ID-Selektor ist eindeutig und eine Wiederverwendung ist nicht zulässig. Versuchen Sie nach Möglichkeit zunächst, einen Tag-Namen, ein neues HTML5-Element oder sogar eine Pseudoklasse zu verwenden.

[Klassenauswahl] (Klasse)

Benutzerdefinierter Klassenname, Verwendung: Schreiben Sie .class name {css style}.

.className in die CSS-Datei {border -color: blue; font-size:16px;}

Hinweis: Ein Label kann mehrere Klassennamen verwenden, und ein Klassenname kann von mehreren Labels verwendet werden.

Der Unterschied zwischen ID und Klasse

ID-Selektor, ein ID-Name kann nur einmal verwendet und nicht wiederholt werden. getElementById('')

Klassenselektor, ein Klassenname kann wiederholt verwendet werden, zum Beispiel können mehrere Elemente auf der Seite dieselbe Stildefinition verwenden.

[Gruppenauswahl]: Steuern Sie mehrere Tags gleichzeitig. Tag-Namen werden durch

a,p,span{}

[Kombinationsselektor] getrennt: Wir können auch auswählen, indem wir Tag-Namen, ID-Namen und Klassennamen mischen und anpassen und The hinzufügen style

p .p {} repräsentiert alle Tags mit der Klasse p unter dem p-Tag.

p,#a {} stellt das Tag mit der ID a und allen p-Tags dar.

[Beziehungsselektor]: Der Beziehungsselektor kann unterteilt werden in

Selektorname                   Beschreibung                     Version     Englischer Name  

E F    Einschlussselektor  Wählen Sie alle in E-Elementen enthaltenen F-Elemente aus. . CSS1 (Descendant Combinator) wird auch als Descendent-Selektor bezeichnet. Der untergeordnete

E>F-Selektor wählt alle untergeordneten Elemente F aus, die E-Elemente sind. CSS2 (Untergeordneter Kombinator)

Der benachbarte E+F-Selektor wählt das F-Element unmittelbar nach dem E-Element aus. CSS2 (Adjacent sibling combinator)

Der E~F-Geschwisterselektor wählt alle Geschwisterelemente F des E-Elements aus. CSS3 (Allgemeiner Geschwisterkombinator)

[Pseudoklassenselektor]

Nicht alle Tags können Pseudoklassenselektoren verwenden. Hier sprechen wir nur über die Pseudoklassenselektoren des a-Tags

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}  //激活链接

✪Hinweis: Sie können eine oder mehrere der oben genannten Pseudoklassen schreiben. Sie müssen sie jedoch in der richtigen Reihenfolge schreiben, sonst treten Probleme auf!

Selektorversion Versionsbeschreibung

E:link CSS1 Legen Sie den Stil des Hyperlinks fest, bevor darauf zugegriffen wird.

E:visited CSS1 Legt den Stil des Hyperlinks fest, wenn dessen Linkadresse besucht wurde.

E:hover CSS1/2 Legt den Stil des Elements fest, wenn es mit der Maus bewegt wird.

E:active CSS1/2 Legt den Stil des Elements fest, wenn es vom Benutzer aktiviert wird (ein Ereignis, das zwischen Mausklick und Loslassen auftritt).

E:focus CSS1/2 Legen Sie den Stil des Elements fest, wenn es zum Eingabefokus wird (das Onfocus-Ereignis des Elements tritt auf).

E:lang(fr) CSS2 Entspricht dem E-Element mithilfe einer speziellen Sprache. Selten verwendet

E:not(s) CSS3 stimmt mit Element E überein, das den s-Selektor nicht enthält.

<:> E: Root-CSS3, das mit dem Root-Element des E-Elements im Dokument übereinstimmt. Bezieht sich häufig auf das HTML-Element

E:first-child CSS2 entspricht dem ersten untergeordneten Element E des übergeordneten Elements.

E:last-child CSS3 Entspricht dem letzten untergeordneten Element E des übergeordneten Elements.

E:only-child CSS3 Entspricht dem einzigen untergeordneten Element E des übergeordneten Elements.

E:nth-child(n) CSS3 Entspricht dem n-ten untergeordneten Element E des übergeordneten Elements.

E:nth-last-child(n) CSS3 Entspricht dem n-ten untergeordneten Element E vom unteren Rand des übergeordneten Elements.

E:first-of-type CSS3 Entspricht dem ersten Geschwisterelement E desselben Typs.

E:last-of-type CSS3 Entspricht dem letzten Geschwisterelement E desselben Typs.

E:only-of-type CSS3 Entspricht dem einzigen Geschwisterelement E desselben Typs.

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中文网！