Bagaimana untuk membuat li pertama tidak digayakan dengan css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk membuat li pertama tidak digayakan dengan css

青灯夜游

Lepaskan： 2022-09-02 19:02:53

asal

2159 orang telah melayarinya

Dalam CSS, membiarkan li pertama tidak digayakan bermakna mengecualikan li pertama dan menambah gaya pada elemen li lain. 3 kaedah: 1. Gunakan ":not()" dan ":first-child", sintaksnya ialah "element:not(:first-child){style}" 2. Use ":nth-of-type", sintaks "Elemen:nth-of-type(n 2){style}"; 3. Gunakan ":nth-child", sintaksnya ialah "Element:nth-child(n 2){style}".

Bagaimana untuk membuat li pertama tidak digayakan dengan css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Biar li pertama tidak digayakan iaitu menambah gaya pada li lain kecuali li pertama.

3 cara untuk melaksanakan

Kaedah 1: Gunakan pemilih: bukan() dan :anak pertama

Gunakan: anak pertama untuk memilih elemen pertama
dan kemudian gunakan :not() untuk memadankan elemen lain yang bukan elemen anak pertama

Contoh: Biarkan li pertama tidak menambah gaya latar belakang merah dan tambah latar belakang merah pada elemen li lain kecuali elemen li pertama

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			li{
				float: left;
				height: 50px;
				line-height: 50px;
				width: 50px;
				margin: 20px;
				background: #ccc;
				text-align: center;
				color: #fff;
			}
			li:not(:first-child){
			
			    background:red;
			
			}
		</style>
	</head>

	<body>
		<ul class="dom">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>

</html>

Salin selepas log masuk

Bagaimana untuk membuat li pertama tidak digayakan dengan css

Penerangan:

:not(selector) Pemilih memadankan setiap elemen yang bukan elemen/pemilih yang ditentukan. Pemilih
:first-child digunakan untuk memilih pemilih yang ditentukan iaitu elemen anak pertama bagi elemen induknya.

Kaedah 2: Gunakan pemilih :nth-of-type()

:nth-of-type(n) untuk memadankan setiap elemen anak Nth yang dimiliki oleh jenis tertentu elemen induk.

n bermula dari 0, kemudian n 2 secara semula jadi bermula dari elemen kedua.

li:nth-of-type(n+2){
background:pink;
}

Salin selepas log masuk

Bagaimana untuk membuat li pertama tidak digayakan dengan css

Begitu juga, jika anda memilih elemen nombor ganjil, kemudian tuliskannya sebagai 是2n 1 jika anda ingin memilih elemen nombor genap, maka anda harus menulis ia sebagai 2n 2; situasi khusus boleh berdasarkan Digunakan dalam situasi projek.

li:nth-of-type(2n+1){
background:pink;
}
li:nth-of-type(2n+2){
background:green;
}

Salin selepas log masuk

Bagaimana untuk membuat li pertama tidak digayakan dengan css

Kaedah 3: Gunakan :nth-child()

:nth-child(n) pemilih untuk memadankan miliknya induk Anak ke-N unsur, tanpa mengira jenis unsur.

Jenis Kaedah 3 dan Kaedah 2, cuma tetapkan nilai () kepada "n 2".

li:nth-child(n+2){
background:green;
}

Salin selepas log masuk

Bagaimana untuk membuat li pertama tidak digayakan dengan css

Begitu juga, jika anda memilih elemen nombor ganjil, maka ia adalah 2n 1; jika anda ingin memilih elemen nombor genap, anda harus menulisnya sebagai 2n 2; situasi khusus boleh berdasarkan situasi projek untuk digunakan.

li:nth-child(2n+1){
	background:green;
}
li:nth-child(2n+2){
	background:pink;
}

Salin selepas log masuk

Bagaimana untuk membuat li pertama tidak digayakan dengan css

(Mempelajari perkongsian video: Bermula dengan bahagian hadapan web)

Atas ialah kandungan terperinci Bagaimana untuk membuat li pertama tidak digayakan dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!