So passen Sie den Tabellenstil in CSS3 an-CSS-Tutorial-php.cn

So passen Sie den Tabellenstil in CSS3 an

清浅

Freigeben： 2018-12-18 09:03:49

Original

5069 Leute haben es durchsucht

In CSS3 können Sie den Tabellenstil anpassen, indem Sie das Pseudoelement nth-child (n) auf das Element setzen, wobei n ein numerischer Wert, ein Schlüsselwort oder eine Formel sein kann

Während des Entwicklungsprozesses stoßen wir häufig auf bestimmte Anforderungen an den Tabellenstil, z. B. darauf, dass die erste oder letzte Zeile in der Tabelle unterschiedliche Stile anzeigt oder dass die ungeraden oder geraden Zeilen in der Tabelle unterschiedliche Hintergrundfarben anzeigen usw. usw. Wir können diese Effekte durch den Pseudoklassenselektor in CSS3 erzielen. Als Nächstes werden wir ihn im Detail vorstellen. Ich hoffe, dass er für alle hilfreich ist.

[Empfohlene Kurse: CSS3-Kurs ]

:nth-child(n) selector

:nth-child(n) selector wird verwendet, um Elemente abzugleichen, die zu seinem übergeordneten Element The gehören N-tes untergeordnetes Element, unabhängig vom Datentyp von N, sodass wir N auf eine Zahl, ein Schlüsselwort oder eine Formel setzen können

Grundsätzlich unterstützen alle gängigen Browser dieses Attribut.

HTML-Code:

<style>
		table{
	font-size:16px;
	color:#333333;
	border-collapse: collapse;/*设置表格的边框是否被合并为一个单一的边框*/
		}
	th{
	border:1px solid #444;
	padding:25px;

	}
	td{
	border:1px solid #444;
	padding: 15px;
	}
	
	</style>
</head>
<body>
	<table>
		<tr>
			<th>示例一</th>
			<th>示例二</th>
			<th>示例三</th>
		</tr>
		<tr>
			<td>test1</td>
			<td>test1</td>
			<td>test1</td>
		</tr>
		<tr>
			<td>test2</td>
			<td>test2</td>
			<td>test2</td>
		</tr>
		<tr>
			<td>test3</td>
			<td>test3</td>
			<td>test3</td>
		</tr>
	</table>

Nach dem Login kopieren

Rendering:

( 1 ) Geben Sie direkt eine bestimmte Zeile an

Sie können die angegebene Anzahl von Tabellenzeilen direkt hinzufügen, um die Hintergrundfarbe in den Klammern des Pseudoelements zu ändern

Beispiel: Ändern Sie die zweite Zeile von Die Hintergrundfarbe der Tabelle ist auf Grau eingestellt, was durch das folgende Code-Rendering

tr:nth-child(2)
{
background:gray;
}

Nach dem Login kopieren

eingestellt werden kann:

Image 2.jpg

(2 ) Durch Festlegen des Vielfachen Ändern Sie die Hintergrundfarbe der Tabelle

Beispiel: Stellen Sie das Vielfache von 2 in der Tabelle auf die Farbe RGB(189.215.238) ein. Der Code lautet wie folgt

tr:nth-child(2n)
{
background:rgb(189,215,238);
}

Nach dem Login kopieren

Das Effektbild sieht wie folgt aus

Image 3.jpg

(3) Verwenden Sie die Formel zum Festlegen von

Beispiel: Legen Sie die Hintergrundfarbe von n+1 fest Zeilen in der Tabelle

tr:nth-child(n+3)
{
background:rgb(189,215,238);
}

Nach dem Login kopieren

Der Effekt ist wie folgt

Image 4.jpg

Fallanalyse: Verwendung des :nth-child(n)-Selektors um eine abwechselnde Zeilenverfärbung von Tabellen zu erreichen

tr:nth-child(2n)
{
background:rgb(189,215,238);
}
tr:nth-child(2n+1){
	background:rgb(207,238,252);
}

Nach dem Login kopieren

Rendering:

So passen Sie den Tabellenstil in CSS3 an

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels I Ich hoffe, dass jeder durch diesen Artikel etwas über das Festlegen der Tabellenhintergrundfarbe in CSS3 lernen kann. Verstehen

Das obige ist der detaillierte Inhalt vonSo passen Sie den Tabellenstil in CSS3 an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!