css的基本選擇器有哪些

發(fā)布時(shí)間：2021-11-03 09:49:47 來(lái)源：億速云閱讀：373 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“css的基本選擇器有哪些”，在日常操作中，相信很多人在css的基本選擇器有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css的基本選擇器有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

css的基本選擇器有：1、通配符選擇器；2、標(biāo)簽選擇器；3、類選擇器；4、Id選擇器；5、結(jié)合元素選擇器；6、多類選擇器。

css的基本選擇器有哪些

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

基本選擇器介紹

基本選擇器又分為六種使用方式：如、通配符選擇器、標(biāo)簽選擇器、類選擇器、Id選擇器、結(jié)合元素選擇器、多類選擇器。
基本選擇器使用說(shuō)明表。

選擇器	語(yǔ)法格式	含義	舉例
通配符選擇器	*{屬性：值;}	通用選擇器可以選擇頁(yè)面上的所有元素，并對(duì)它們應(yīng)用樣式，用 * 來(lái)表示。不建議使用，IE6不支持，給大型網(wǎng)站增加負(fù)擔(dān)。	*{width: 300px;}
標(biāo)簽選擇器	標(biāo)簽名{屬性：值;}	標(biāo)簽選擇器，匹配對(duì)應(yīng)的HTML的標(biāo)簽。	h2{color: red;}
類選擇器	.class屬性值{屬性：值;}	類選擇器，給擁有指定的class屬性值的元素設(shè)置樣式。	.box{color: red;}
Id選擇器	#id屬性值{屬性：值;}	Id選擇器，在一個(gè) HTML 文檔中，Id 選擇器會(huì)使用一次，而且僅一次。Id選擇器以#來(lái)定義。	#box{color: red;}
結(jié)合元素選擇器	標(biāo)簽名 .class屬性值{屬性：值}	選擇器會(huì)根據(jù)標(biāo)簽名中包含指定的.class屬性值的元素。	p.box {color:red;}
多類選擇器	.class屬性值.class屬性值{屬性：值;}	通過把兩個(gè)類選擇器鏈接在一起，僅可以選擇同時(shí)包含這些類名的元素（類名的順序不限）。注意：在 IE7 之前的版本中，不同平臺(tái)的 Internet Explorer 都不能正確地處理多類選擇器。	.box.box1{color:red;}

通配符選擇器

接下來(lái)讓我們進(jìn)入通用選擇器實(shí)踐，筆者以嵌入式的形式，將HTML頁(yè)面中的h2標(biāo)簽和p標(biāo)簽中的字體顏色設(shè)置為紅色。
代碼塊

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

	<body>
		<h2>億速云</h2>
		<p>億速云</p>
	</body>
</html>

結(jié)果圖

css的基本選擇器有哪些

標(biāo)簽選擇器

接下來(lái)讓我們進(jìn)入標(biāo)簽選擇器實(shí)踐，筆者以嵌入式的形式，將HTML頁(yè)面中的h2標(biāo)簽和p標(biāo)簽中的字體顏色設(shè)置為紅色。
代碼塊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>標(biāo)簽選擇器</title>
		<style>
			h2 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2>億速云</h2>
		<p>億速云</p>
	</body>
</html>

結(jié)果圖

css的基本選擇器有哪些

注意：標(biāo)簽選擇器是指給指定的標(biāo)簽設(shè)置樣式。

代碼塊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>標(biāo)簽選擇器</title>
		<style>
			h2 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2>成功不是擊敗別人，而是改變自己。</h2>
		<h2>億速云</h2>
		<p>億速云</p>
	</body>
</html>

結(jié)果圖
現(xiàn)在大家應(yīng)該知道了p標(biāo)簽為什么沒有改變了，因?yàn)闃?biāo)簽選擇器的作用是給指定的標(biāo)簽設(shè)置樣式的，接下來(lái)筆者將p標(biāo)簽的字體顏色設(shè)置為紅色。
代碼塊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>標(biāo)簽選擇器</title>
		<style>
			h2 {
				color: red;
			}

			p {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2>成功不是擊敗別人，而是改變自己。</h2>
		<h2>億速云</h2>
		<p>億速云</p>
	</body>
</html>

結(jié)果圖

類選擇器

接下來(lái)讓我們進(jìn)入類選擇器實(shí)踐，筆者以嵌入式的形式，使用類的屬性值為.box，來(lái)完成HTML頁(yè)面中的h2標(biāo)簽和p標(biāo)簽中的字體顏色設(shè)置為紅色。
首先我們將HTML頁(yè)面中的第一個(gè)h2標(biāo)簽字體顏色設(shè)置為紅色。
代碼塊

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

	<body>
		<h2 class="box">成功不是擊敗別人，而是改變自己。</h2>
		<h2>億速云</h2>
		<p>億速云</p>
	</body>
</html>

結(jié)果圖
注意：只要是class屬性的值為.box的標(biāo)簽，不管它是什么標(biāo)簽，都會(huì)將字體顏色設(shè)置為紅色，其余的CSS樣式也是一致。
現(xiàn)在我們將第二個(gè)h2標(biāo)簽和p標(biāo)簽字體顏色設(shè)置為紅色。
代碼塊

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

<body>
    <h2 class="box">成功不是擊敗別人，而是改變自己。</h2>
	<h2 class="box">億速云</h2>
	<p class="box">億速云</p>
</body>
</html>

結(jié)果圖

Id選擇器

接下來(lái)讓我們進(jìn)入id選擇器實(shí)踐，筆者以嵌入式的形式，通過id屬性值為#box，將HTML頁(yè)面中的h2標(biāo)簽中的字體顏色設(shè)置為紅色。
代碼塊

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

	<body>
		<h2 id="box">成功不是擊敗別人，而是改變自己。</h2>
	</body>
</html>

結(jié)果圖
注意：使用id選擇器是給擁有指定的id屬性值來(lái)設(shè)置樣式，但是要注意在一個(gè)HTML頁(yè)面中id的屬性值必須是唯一的。

結(jié)合元素選擇器

接下來(lái)讓我們進(jìn)入結(jié)合元素選擇器實(shí)踐，筆者以嵌入式的形式，通過h3標(biāo)簽class屬性值為.box元素的字體顏色，設(shè)置為紅色。
代碼塊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>結(jié)合元素選擇器</title>
		<style>
			h3.box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h3 class="box">成功不是擊敗別人，而是改變自己。</h3>
		<span class="box">成功不是擊敗別人，而是改變自己。</span>
	</body>
</html>

結(jié)果圖
注意：結(jié)合元素選取器執(zhí)行原理說(shuō)明如下：首先是先找到h3標(biāo)簽，然后再去h3標(biāo)簽中找class屬性值為.box，如果找到class屬性值為.box就給其設(shè)置樣式?，F(xiàn)在大家應(yīng)該知道了span標(biāo)簽下面的class屬性值為.box為什么沒有渲染的原因了。

多類選擇器

接下來(lái)讓我們進(jìn)入多類選擇器實(shí)踐，筆者以嵌入式的形式，將class屬性值包含.box和.box1元素的字體顏色設(shè)置為紅色。
代碼塊

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

	<body>
		<h3 class="box1 box">成功不是擊敗別人，而是改變自己。</h3>
		<span class="box box1">成功不是擊敗別人，而是改變自己。</span>
		<h3 class="box1 ">億速云</h3>
		<span class="box">億速云</span>
	</body>
</html>

css的基本選擇器有哪些

注意：多類選擇器執(zhí)行原理說(shuō)明如下：首先class屬性值可以設(shè)置為多個(gè)以空格隔開即可，舉例：如果一個(gè)class屬性值包含.box和.box1將其設(shè)置樣式，通過把兩個(gè)類選擇器鏈接在一起，僅可以選擇同時(shí)包含這些類名的元素（類名的順序不限）。如果一個(gè)多類選擇器包含類名列表中沒有的一個(gè)類名，匹配就會(huì)失敗。現(xiàn)在大家應(yīng)該知道了單獨(dú)的class屬性值為.box和.box1沒有被渲染了。

到此，關(guān)于“css的基本選擇器有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問一下細(xì)節(jié)

css的基本選擇器有哪些

基本選擇器介紹

通配符選擇器

標(biāo)簽選擇器

類選擇器

Id選擇器

結(jié)合元素選擇器

多類選擇器

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽