pemilih kelas

Anda boleh mentakrifkan pemilih kelas dengan titik (.) dan rentetan undang-undang, contohnya:

.antzone

Kod di atas ialah pemilih Kelas, tetapi agar pemilih kelas berkesan, kelas yang sepadan perlu ditakrifkan dalam elemen html Kodnya adalah seperti berikut:

<div id="antzone">< / div>

Contoh kod adalah seperti berikut:

<style type="text/css">
.antzone{
  width:100px;
  height:100px;
}
</style>
<div class="antzone"></div>

Untuk memudahkan pembacaan, kod di atas telah dipermudahkan Ambil perhatian bahawa nilai atribut kelas tidak boleh didahului dengan a titik (.). Anda juga boleh menggunakan berbilang pemilih kelas pada elemen yang sama Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
.antzone{
  width:100px;
  height:100px;
  border:1px solid black;
}
.a{
  color:red;
}
.b{
  font-weight:bold;
}
</style>
</head>
<body>
<div class="antzone a b">php中文网</div>
</body>
</html>

Nilai atribut kelas boleh dipisahkan dengan ruang untuk setiap kelas. Ambil perhatian bahawa anda tidak boleh menambah titik di hadapan.

Pemilih kelas juga boleh digunakan bersama dengan pemilih elemen Contohnya, terdapat berbilang elemen pada halaman yang menggunakan kelas "antzone" pada masa yang sama, tetapi kadangkala kita hanya mahu menyasarkan elemen div yang. nilai atribut kelas ialah antzone. Untuk mengubah suai gaya, kita boleh menulis seperti ini:

div.antzone{
  color:blue;
}

Kod di atas boleh menetapkan warna fon elemen div dengan nilai atribut kelas antzone kepada biru.

Seperti yang diperkenalkan dalam kod di atas, elemen boleh mempunyai berbilang nama kelas, dipisahkan oleh ruang Malah, pemilih juga boleh menyambungkan berbilang kelas Kod tersebut adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>hp中文网</title>
<style type="text/css">
.antzone{
  width:100px;
  height:100px;
  border:1px solid black;
}
.antzone.a{
  color:blue;
}
</style>
</head>
<body>
<div class="antzone a b">php中文网</div>
<div class="antzone b">php中文网</div>
</body>
</html>

The kod di atas boleh menjadikan elemen dengan kedua-dua antzone dan kelas sah.

Kadangkala berbilang pemilih mentakrifkan atribut gaya yang sama, seperti berikut:

.a{
  width:100px;
  height:100px;
}
.b{
  width:100px;
  height:100px;
  color:red;
}

Kod di atas boleh diubah suai seperti berikut:

.a,.b{
  width:100px;
  height:100px;
}
.b{
  color:red;
}

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>hp中文网</title> <style type="text/css"> .antzone{ width:100px; height:100px; border:1px solid black; } .antzone.a{ color:blue; } </style> </head> <body> <div class="antzone a b">hp中文网</div> <div class="antzone b">hp中文网</div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

pemilih kelas

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]