Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk membuat li pertama tidak digayakan dengan css
Bagaimana untuk membuat li pertama tidak digayakan dengan css
- 青灯夜游asal
- 2022-09-02 19:02:532202semak imbas
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}".
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>
Penerangan:
:not(selector)Pemilih memadankan setiap elemen yang bukan elemen/pemilih yang ditentukan. Pemilih:first-childdigunakan 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;
}
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;
}
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;
}
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;
}
(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!