css pseudo-class selector
/*element selector*/
ul {
padding: 0;
margin: 0 ;
Breite: 450px;
Rand: 1px gestrichelt #666;
Abstand: 10px 5px;
}
ul:after { /*Der untergeordnete Block öffnet den übergeordneten Block*/
content:'' /*Ein leeres Inhaltselement am Ende des untergeordneten Elements hinzufügen*/
display: block; /*And set to block-level display*/
clear:both; /*Floats auf beiden Seiten löschen*/
/*visibility: none; !*hidden also Line*!*/
/*height: 0;*/
/*_height: 1%; !*For IE*!*/}
li { list -style: none; /*Entferne den Standardlistenelementstil*/
float: left; /*Left float*/
width: 40px /*Set die Breite*/
Höhe: 40px; /*Höhe festlegen*/
Zeilenhöhe: 40px; /*Text vertikal zentrieren*/
text-align : zentrieren; /*Text horizontal zentrieren*/
Randradius: 50 %; /*Rand abgerundete Ecken festlegen*/
Hintergrund: Himmelblau;
margin-right: 5px; /*Rechter Rand zwischen jedem Ball*/}
/*:before: Vor dem angegebenen Selektor einfügen, die Standardeinstellung ist ein Inline-Element*/
ul:before {/* Text einfügen*/Inhalt: 'PHP chinesische Website'
/*In Blockelement konvertieren*/ display: block; /*In Blockelement konvertieren*/display : block;
/*content: url(../html/images/5.jpg);*/
/*content: '' ; */
/*Die Größe kann nur eingestellt werden, wenn das Bild als Hintergrund eingestellt ist*/
/*background-image: url(../html/images/5. jpg);*/
/*background-size:100px 100px;*/
/*height: 100px; */
/*width: 100px;*/ }
/*:after:at Elemente nach dem angegebenen Element hinzufügen. Der Standardwert ist ein Inline-Element, das Text, Bild oder sogar Video sein kann. /*content:'www.php.cn';*/
/*color:red;*/}
/*:first-child: Wählen Sie das erste untergeordnete Element im übergeordneten Element aus element*/
/*Hinweis: Auf der aktuellen Seite gibt es nur ein ul-Element, daher ist das übergeordnete ul*/
ul li:first-child {
Hintergrund -color: brown;}
/*:last- child: Wählen Sie das erste untergeordnete Element im übergeordneten Element aus*/
ul li:last-child {
background -color: hellgrün;}
/*:only -child: Wählen Sie das Element aus, das das einzige untergeordnete Element im aktuellen übergeordneten Element ist. IE unterstützt nicht */
p:only-. child {
/*Unter den beiden Divs gibt es nur das erste. Es gibt nur ein
untergeordnetes Element im Div, also nur das
*/
/* color:red;*/}
/ im ersten div ist ausgewählt *only-of-type: Wählt das einzige
-Element aus Typ (Tag-Name) des untergeordneten Elements wird angegeben*/
p:only- of-type {
/*Kommentieren Sie zuerst das einzige untergeordnete Element oben aus dass p im dritten Div ebenfalls ausgewählt wird, da es das einzige untergeordnete Element mit dem angegebenen p-Typ ist. */
color:red;}
Der Unterschied zwischen only-child und only -of-type:
1. Gemeinsame Punkte: Beide wählen das einzige im übergeordneten Element aus. Untergeordnetes Element
2. Unterschied: only-child schränkt den Typ des untergeordneten Elements nicht ein. only-of-type: schränkt den Typ des untergeordneten Elements ein, zum Beispiel muss es ein p-Tag
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.伪类选择器</title> </head> <body> <ul> <li id="item1">1</li> <li>2</li> <li class="green red">3</li> <li>4</li> <li>5</li> <li id="item2">6</li> <li>7</li> <li class="php css">8</li> <li>9</li> <li>10</li> </ul> <div> <p>我是当前div元素中的唯一子元素</p> </div> <div> <p>我是当前div元素中的第一个子元素</p> <p>我是当前div元素中的第二个子元素</p> </div> <div> <p>我虽然是div下唯一的类型为p的子元素</p> <h4>我是div下的另一个子元素h4</h4> </div> </body> </html>
Das obige ist der detaillierte Inhalt vonCSS-Pseudoklassenselektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
