Heim > Artikel > Web-Frontend > CSS-Pseudoklassenselektor

CSS-Pseudoklassenselektor

无忌哥哥Original: 2018-06-28 17:16:141855Durchsuche

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 e388a4556c0f65e1904146cc1a846bee untergeordnetes Element im Div, also nur das e388a4556c0f65e1904146cc1a846bee*/

/* color:red;*/}

/ im ersten div ist ausgewählt *only-of-type: Wählt das einzige e388a4556c0f65e1904146cc1a846bee-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>

sein

Das obige ist der detaillierte Inhalt vonCSS-Pseudoklassenselektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css html Float 选择器外边距 display margin padding border 伪类 background ul li

Stellungnahme：

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

Vorheriger Artikel：Beispiel für eine CSS-AttributauswahlNächster Artikel：Beispiel für eine CSS-Attributauswahl

In Verbindung stehende Artikel

Mehr sehen