Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS-Selektoren

高洛峰
Freigeben: 2017-02-22 13:21:23
Original
1882 Leute haben es durchsucht

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}  //激活链接
Nach dem Login kopieren

✪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的区别:

举例:

<p class="test">
<p>第一个子元素</p>
<h1>第二个子元素</h1>
<span>第三个子元素</span>
<span>第四个子元素</span>
</p>
Nach dem Login kopieren

语法说明:

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="测试">
Nach dem Login kopieren

css:

input::-webkit-input-placeholder {color: green;}
Nach dem Login kopieren

 

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!