CSS-Pseudoklassenselektor-CSS-Tutorial-php.cn

CSS-Pseudoklassenselektor

无忌哥哥

Freigeben： 2018-06-28 17:16:14

Original

1891 Leute haben es durchsucht

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>

Nach dem Login kopieren

sein

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