CSS3-Selektor (Teil 1)-HTML-Tutorial-php.cn

1, Trennlinien zur Navigation hinzufügen, links und rechts

.nav li::before,.nav li::after{

Inhalt:"";

Position:absolut;

top:14px;

Höhe:25px;

Breite:1px;

}

.nav li::before{

links:0;

Hintergrund:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

Hintergrund:-moz-linear-gradient(nach unten,#f06254,#ffffff,#f06254);

Hintergrund:-o-linear-gradient(nach unten,#f06254,#ffffff,#f06254);

Hintergrund:-ms-linear-gradient(nach unten,#f06254,#ffffff,#f06254);

Hintergrund:linearer Farbverlauf(nach unten,#f06254,#ffffff,#f06254);

}

.nav li::after{

richtig:0;

Hintergrund:-webkit-linear-gradient(nach unten,#f06254,#bf554c,#f06254);

Hintergrund:-moz-linear-gradient(nach unten,#f06254,#bf554c,#f06254);

Hintergrund:-o-linear-gradient(nach unten,#f06254,#bf554c,#f06254);

Hintergrund:-ms-linear-gradient(nach unten,#f06254,#bf554c,#f06254);

Hintergrund:linearer Farbverlauf(nach unten,#f06254,#bf554c,#f06254);

}

.nav li:first-child::before{ background:none;}

.nav li:last-child::after{ background:none;}

html Code:

Der Link, den ich verlinke, ist PDFDatei

Mein Klassenname ist icon

Mein Titel ist mehr">ich Titel ist mehr

CSSCode

a[class^=icon]{

Hintergrund: grün;

color:#fff; //Definieren Sie eine beliebige Zeichenfolge beginnend mit icon

}

a[href$=pdf]{

Hintergrund: orange;

Farbe: #fff;definiere href eine beliebige Zeichenfolge , die mit pdf

endet

}

ein[Titel*=mehr]{

Hintergrund: blau;

Farbe: #fff; Beliebige Zeichenfolge definiert mit Titel

}

Zum Beispiel:

Ich möchte den Hintergrund rot machen

Ich möchte den Hintergrund grün machen

Ich möchte den Hintergrund blau machen

Struktureller PseudoklassenselektorWurzel

:root-Selektor, im wahrsten Sinne des Wortes können wir ihn eindeutig als Root-Selektor verstehen,

Er meint, das Stammelement des Dokuments abzugleichen, in dem sich das Element E befindet. In einem HTML-Dokument ist das Stammelement immer

Der Selektor

(„:root“ entspricht dem Element , vereinfacht ausgedrückt:

:root{background:orange}

html {background:orange;}

Der erzielte Effekt ist derselbe.

Es wird empfohlen, die Methode :root zu verwenden.

Darüber hinaus können Sie in IE９ und darunter auch „:root“ verwenden, um zu implementieren Hack Funktion. )

Struktureller Pseudoklassenselektor – nicht

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：form {

input:not([type="submit"]){

border:1px solid red;

}//意思是除了type=submit意外的input边框为红色

5、结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码：

我是一个段落

CSS代码：

background: orange;

min-height: 30px;

}

p:empty {

display: none;

}

6、结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

例:

Brand

content for aron

CSS-Code:

#brand:target {

Hintergrund: orange;

Farbe: #fff;

}

#jake:target {

Hintergrund: blau;

Farbe: #fff;

}

#aron:target{

Hintergrund: rot;

Farbe: #fff;

}

7, Struktureller Pseudoklassenselektor – erstes Kind

Der Selektor

„:first-child“ stellt das Element dar, das das erste untergeordnete Element des übergeordneten Elements E auswählt. Ein einfaches Verständnis besteht darin, das erste untergeordnete Element im Element auszuwählen. Denken Sie daran, dass es sich um ein untergeordnetes Element und nicht um ein untergeordnetes Element handelt.

HTMLCode:

Link1

Link2

link3

CSSCode:

ol > li:first-child{

Farbe: rot;

}//Die erste Seriennummer von html wird rot. Wenn es sich um eine ungeordnete Liste handelt, ändert das Sequenzsymbol im Frontend die Farbe

Erstes Kind ist genau das Gegenteil von Letztes Kind

8, Struktureller Pseudoklassenselektor – n-tes Kind(n)

Der

„:nth-child(n)“-Selektor wird verwendet, um ein oder mehrere spezifische untergeordnete Elemente eines -Elternelements zu finden. Dabei ist "n" sein Parameter und kann ein ganzzahliger Wert (1,2,3,4) oder ein Ausdruck(2n 1, -n 5) und Schlüsselwörter (odd, gerade), aber der Startwert des Parameters n ist immer 1, während Nicht 0. Mit anderen Worten: Wenn der Wert des Parameters n 0 ist, wählt der Selektor keine passenden Elemente aus.

HTML

Code:

item1

item2

item3

item4

CSS

Code:

ol > li:nth-child(2n){

Hintergrund: orange;

}//Übergeben Sie den Selektor

":nth-child(n)", und der Parameter verwendet den Ausdruck "2n", Die Hintergrundfarbe der geraden Zeilenliste wird auf Orange gesetzt.

9, Struktureller Pseudoklassenselektor – n-letztes Kind(n)

Der Selektor

„:nth-last-child(n)“ ist dem vorherigen Selektor „:nth-child(n)“ sehr ähnlich, mit der Ausnahme „There“. ist ein zusätzlicher "last", der die gleiche Rolle spielt wie der ":nth-child(n)"-Selektor Der Unterschied ist, ausgehend vom letzten untergeordneten Element eines übergeordneten Elements, ein bestimmtes Element auszuwählen

ol > li:nth-last-child(5){

Hintergrund: orange;

}//Wählen Sie das fünftletzte Listenelement in der Liste aus und stellen Sie dessen Hintergrund auf Orange ein.

10, First-of-Type Selektor

Der

„:first-of-type“-Selektor ähnelt dem „:first-child“-Selektor, der Unterschied besteht darin, dass das Element angibt Typ, Wird hauptsächlich verwendet, um das erste untergeordnete Element eines bestimmten Typs unter einem übergeordneten Element zu lokalisieren.

Positionieren Sie das div als erstes im Container über den Selektor „:first-of-type“ p-Element (p ist nicht unbedingt das erste untergeordnete Element im Container) und legen Sie seine Hintergrundfarbe auf Orange fest.

.wrapper > p:first-of-type {

Hintergrund: orange;

//last-of-typeSelektor

Der

„:last-of-type“-Selektor hat die gleiche Funktion wie der “:first-of-type“-Selektor. Der Unterschied besteht darin, dass er auswählt Das letzte untergeordnete Element eines Typs unter dem übergeordneten Element.

11, n-tel-Typ(n)Selektor

Der

":nth-of-type(n)"-Selektor ist dem ":nth-child(n)"-Selektor sehr ähnlich, außer dass Only Zählt untergeordnete Elemente eines bestimmten Typs, der im übergeordneten Element angegeben ist. Wenn die untergeordneten Elemente in einem Element nicht nur untergeordnete Elemente desselben Typs sind, verwenden Sie den Selektor ":nth-of-type(n)", um das übergeordnete Element eines bestimmten Typs zu finden des untergeordneten Elements ist sehr praktisch und nützlich. "n" und im Selektor ":nth-of-type(n)" Das Gleiche gilt für den Parameter „:nth-child(n)“„n“ im Selektor, der eine bestimmte ganze Zahl oder ein Ausdruck sein kann können auch Schlüsselwörter sein.

Beispiel:.wrapper > p:nth-of-type(2n){

Hintergrund: orange;

} Verwenden Sie den Selektor ":nth-of-type(2n)", um die gerade Anzahl von Segmenten im Container "div.wrapper" Hintergrund auf Orange eingestellt.

, n-tel-of-type(n)Selektor

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。

.wrapper > p:nth-last-of-type(3){

background: orange;

}

12、only-child选择器

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

示例演示

通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。

HTML代码：

我是一个段落

CSSCode:

.post p {

Hintergrund: grün;

Farbe: #fff;

Auffüllung: 10px;

}

.post p:only-child {

Hintergrund: orange;

}

13, only-of-type Selektor

„:only-of-type“Der Selektor wird verwendet, um ein Element auszuwählen, das das einzige untergeordnete Element desselben Typs wie sein übergeordnetes Element ist. Das ist vielleicht nicht leicht zu verstehen, sagen wir es anders. „:only-of-type“ bedeutet, dass ein Element viele Unterelemente hat und nur ein Typ von Unterelementen eindeutig ist. Das „ Der Selektor „:only-of-type“ kann das einzige Typ-Unterelement in diesem Element auswählen.

Beispieldemonstration

Verwenden Sie den Selektor „:only-of-type“ , um die Hintergrundfarbe nur eines div-Elements im Container in Orange zu ändern .

HTMLCode:

Ich bin ein Absatz

Ich bin ein DivElement

Ich bin ein Div