Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah pemilih asas css

Apakah pemilih asas css

青灯夜游asal: 2021-11-02 18:25:229506semak imbas

Pemilih asas CSS ialah: 1. Pemilih kad bebas; 3. Pemilih kelas; 5. Pemilih elemen gabungan;

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

Pengenalan kepada pemilih asas

Pemilih asas dibahagikan kepada enam cara penggunaan: seperti pemilih kad bebas, pemilih teg, pemilih kelas, pemilih Id, elemen gabungan Pemilih, pelbagai jenis pemilih.
Jadual arahan penggunaan pemilih asas.

选择器	语法格式	含义	举例
通配符选择器	*{属性：值;}	通用选择器可以选择页面上的所有元素，并对它们应用样式，用 * 来表示。不建议使用，IE6不支持，给大型网站增加负担。	*{width: 300px;}
标签选择器	标签名{属性：值;}	标签选择器，匹配对应的HTML的标签。	h1{color: red;}
类选择器	.class属性值{属性：值;}	类选择器，给拥有指定的class属性值的元素设置样式。	.box{color: red;}
Id选择器	#id属性值{属性：值;}	Id选择器，在一个 HTML 文档中，Id 选择器会使用一次，而且仅一次。Id选择器以#来定义。	#box{color: red;}
结合元素选择器	标签名 .class属性值{属性：值}	选择器会根据标签名中包含指定的.class属性值的元素。	p.box {color:red;}
多类选择器	.class属性值.class属性值{属性：值;}	通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。注意：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。	.box.box1{color:red;}

Pemilih Wildcard

Seterusnya mari kita masukkan amalan pemilih universal Pengarang menggunakan borang terbenam untuk menggabungkan teg HTML dalam halaman h1 dan teg p dalam. Warna fon ditetapkan kepada merah.
Blok kod

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			* {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

Graf hasil

Apakah pemilih asas css

Pemilih Teg

Seterusnya mari kita masukkan amalan pemilih teg Pengarang menggunakan borang terbenam untuk menggabungkan teg HTML dan h1 dalam halaman p. warna fon dalam ditetapkan kepada merah.
Blok kod

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

Graf hasil

Apakah pemilih asas css

Nota: Pemilih teg merujuk kepada penetapan gaya untuk teg yang ditentukan.

Blok kod

nbsp;html>

	
		<meta>
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

Graf hasil
Sekarang anda harus tahu mengapa tag p tidak berubah, kerana peranan pemilih tag adalah untuk menetapkan gaya untuk tag yang ditentukan. daripada tag p Warna ditetapkan kepada merah.
Blok kod

nbsp;html>

	
		<meta>
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}

			p {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

Graf hasil

Pemilih Kelas

Seterusnya mari kita masukkan amalan pemilih kelas Pengarang menggunakan nilai atribut kelas sebagai .box dalam bentuk terbenam untuk melengkapkan halaman HTML. warna fon dalam teg h1 dan teg p ditetapkan kepada merah.
Mula-mula kita tetapkan warna fon teg HTML pertama dalam halaman h1 kepada merah.
Blok kod

nbsp;html>

	
		<meta>
		<title>类选择器</title>
		<style>
			.box {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

Graf hasil
Nota: Selagi nilai atribut class ialah .box, tidak kira apa teg itu, warna fon akan ditetapkan kepada merah dan gaya CSS yang lain adalah sama.
Kini kami menetapkan teg h1 kedua dan p warna fon teg kepada merah.
Blok kod

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
    <style>
        .box{
            color:red;
        }
    </style>
</head>

<body>
    <h1 class="box">成功不是击败别人，而是改变自己。</h1>
	<h1 class="box">PHP中文网</h1>
	<p class="box">PHP中文网</p>
</body>
</html>

Graf hasil

Pemilih Id

Seterusnya mari kita masukkan amalan pemilih id Pengarang menggunakan borang terbenam untuk menghantar nilai atribut id kepada #box dan menggantikan <.>Warna fon dalam teg HTML dalam halaman ditetapkan kepada merah. h1
Blok kod

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 id="box">成功不是击败别人，而是改变自己。</h1>
	</body>
</html>

Graf hasil
Nota: Menggunakan pemilih
adalah untuk menetapkan gaya dengan nilai atribut id yang ditentukan, tetapi sila ambil perhatian bahawa nilai atribut id mestilah unik dalam halaman HTML . id

Pemilih elemen gabungan

Seterusnya mari kita mulakan amalan menggabungkan pemilih elemen nilai atribut tag
ialah warna fon bagi elemen h2, yang ditetapkan kepada merah. class.box

nbsp;html>

	
		<meta>
		<title>结合元素选择器</title>
		<style>
			h2.box {
				color: red;
			}
		</style>
	

	
		<h2>成功不是击败别人，而是改变自己。</h2>
		<span>成功不是击败别人，而是改变自己。</span>

, dan kemudian pergi ke tag
untuk mencari atribut h2 yang nilainya h2 . Jika atribut class ditemui Jika nilainya ialah .box, tetapkan gaya untuknya. Kini semua orang harus mengetahui sebab mengapa nilai atribut class di bawah teg .box ialah span dan tidak diberikan. class.box

Pemilih berbilang kelas

nilai atribut mengandungi warna fon bagi elemen
dan class yang ditetapkan kepada merah. .box.box1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多类选择器</title>
		<style>
			.box.box1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2 class="box1 box">成功不是击败别人，而是改变自己。</h2>
		<span class="box box1">成功不是击败别人，而是改变自己。</span>
		<h2 class="box1 ">PHP中文网</h2>
		<span class="box">PHP中文网</span>
	</body>
</html>

Nota: Prinsip pelaksanaan pemilih berbilang kategori dijelaskan seperti berikut: Pertama, nilai atribut class boleh ditetapkan kepada berbilang nilai yang dipisahkan oleh ruang Contohnya: Jika nilai atribut class mengandungi .box dan .box1 Gaya tetapannya, dengan memautkan dua pemilih kelas bersama-sama, hanya boleh memilih elemen yang mengandungi kedua-dua nama kelas ini (urutan nama kelas tidak terhad). Jika pemilih berbilang kelas mengandungi nama kelas yang tiada dalam senarai nama kelas, perlawanan akan gagal. Sekarang anda harus tahu bahawa nilai atribut class yang berasingan adalah .box dan .box1 tidak diberikan.

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah pemilih asas css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah maksud bahasa Cina bagi htmlArtikel seterusnya：Apakah maksud bahasa Cina bagi html

Artikel berkaitan

Lihat lagi