Pemilih sifat CSS
1. Apakah pemilih atribut
Pemilih atribut merujuk kepada penggunaan tag atribut html sebagai pemilih gaya set Atribut yang ditentukan untuk elemen HTML.
Pemilih atribut boleh menetapkan gaya untuk elemen HTML dengan atribut tertentu, bukan hanya atribut kelas dan id.
Peringatan hangat: Jika anda menggunakan penyemak imbas IE, pemilihan atribut tidak disokong dalam IE6 atau versi yang lebih rendah. IE7 hanya menyokong penggunaan pemilih atribut apabila !DOCTYPE ditentukan.
2. Sintaks pemilih atribut
Pemilih atribut dipaparkan dengan []. Contoh berikut ditetapkan untuk semua elemen dengan atribut tajuk Gaya:
[tajuk]
{
warna: merah;
}
Pemilih atribut mudah
Ia hanya mengambil berat tentang namanya tetapi bukan nilainya.
h1[class] {color: silver;} akan digunakan pada mana-mana elemen h1 dengan kelas, tanpa mengira nilai kelas. Jadi h1 daripada <h1 class="hoopla">Hello</h1>, <h1 class="severe">Serenity</h1>, <h1 class="fancy">Fooling</h1> ; akan dipengaruhi oleh peraturan ini.
Sudah tentu, "atribut" ini bukan sekadar kelas atau id, ia boleh menjadi semua atribut undang-undang elemen, seperti alt img, jadi img[alt]{pengisytiharan css di sini;} akan bertindak pada mana-mana fail dengan elemen img dengan atribut alt. Bagaimana pula dengan [href][title] {font-weight: bold;}? Jika anda bijak, anda mesti sudah tahu bahawa ini akan menjejaskan elemen dengan kedua-dua atribut href dan tajuk, seperti <a href="//m.sbmmt.com/" title="php Home">< /a>
Pemilih nilai atribut yang tepat
id dan kelas pada dasarnya adalah pemilih nilai atribut yang tepat Ya, h1#logo bersamaan dengan h1[id="logo"] . Seperti yang dinyatakan sebelum ini, kami tidak terhad kepada id atau kelas, kami boleh menggunakan sebarang atribut! Contohnya, a[href="//m.sbmmt.com/"][title="W3C Home"] {font-size: 200%;} akan berfungsi pada<a href="//m.sbmmt.com /" title="php Home"></a>.
Pemilih Nilai Atribut Separa
Seperti namanya, selagi nilai atribut separa sepadan (bahagian di sini sebenarnya sepadan dengan keseluruhan perkataan) ia akan bertindak pada unsur. Mari lihat contoh:
<p class="urgent warning">Apabila mengendalikan plutonium, penjagaan mesti diambil untuk mengelakkan pembentukan jisim kritikal.</ p> ;p[class~="warning"] {font-weight: bold;}
dan
p[class~="urgent"] {font-weight: bold;}
boleh menjadikan fon p ini lebih tebal.
Pemilih ini sangat berguna Contohnya, jika anda ingin menggayakan ilustrasi, dan tajuk mengandungi rentetan "Rajah", sebagai contoh, tajuk = "Rajah 5: huraian xxx. ", maka anda boleh Gunakan img[title~="Rajah"].
[tajuk]: Pilih elemen dengan atribut tajuk
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title]{
color:red;
}
</style>
</head>
<body>
<h1 title = "属性选择器">标题<h1>
<p>这是内容</p>
<h1>标题<h1>
<p>这是内容</p>
</body>
</html>[title='hello']: Pilih elemen yang atributnya ialah tajuk dan nilainya ialah hello
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title = "hello"]{
color:red;
}
</style>
</head>
<body>
<h1 title = "属性选择器">标题<h1>
<p>这是内容</p>
<h1 title = "hello">标题<h1>
<p>这是内容</p>
</body>
</html>[title*='hello']: Pilih elemen yang atributnya ialah tajuk dan yang mengandungi hello
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title*="hello"]{
color:red;
}
</style>
</head>
<body>
<h1 title = "hellocss">标题<h1>
<p>这是内容</p>
<h1 title = "hello css">标题<h1>
<p>这是内容</p>
</body>
</html>
