什么是css選擇器以及css3中種常見(jiàn)的基本選擇器有哪些

本篇文章給大家分享的是有關(guān)什么是css選擇器以及css3中種常見(jiàn)的基本選擇器有哪些，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

目前創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、鄂托克前網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

一：什么是css選擇器？

CSS是一種用于屏幕上渲染html，xml等一種語(yǔ)言，CSS主要是在相應(yīng)的元素中應(yīng)用樣式，來(lái)渲染相對(duì)應(yīng)用的元素，那么這樣我們選擇相應(yīng)的元素就很重要了，如何選擇對(duì)應(yīng)的元素，此時(shí)就需要我們所說(shuō)的選擇器。在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素。選擇器主要是用來(lái)確定html的樹(shù)形結(jié)構(gòu)中的DOM元素節(jié)點(diǎn)。

二：css3中5種常見(jiàn)的基本選擇器

css3中的選擇器種類有很多，下面介紹的是5種常見(jiàn)的基本選擇器：通配選擇器，類選擇器，元素選擇器， ID選擇器和群組選擇器。

1.通配符選擇器（所有瀏覽器支持）
通用選擇器用*來(lái)表示，用來(lái)選擇所有元素，，也可以選擇某個(gè)元素下的所有元素；

*{marigin: 0;
   padding: 0;
   font-size: 14px;
}

上面代碼大家在reset樣式文件中看到的肯定不少，他所表示的是，所有元素的margin和padding都設(shè)置為0，字體大小都設(shè)置為14px,另外一種就是選擇某個(gè)元素下的所有元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符選擇器</title>
		<style>
			.demo * {
				width: 50px;
				height: 50px;
				border:1px solid blue;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div>1</div>
			<p>2</p>
			<span>3</span>
		</div>
	</body>
</html>

效果圖：

什么是css選擇器以及css3中種常見(jiàn)的基本選擇器有哪些

我們可以看到在demo元素里的三個(gè)子元素div，p，span都是分別沒(méi)有設(shè)置css樣式的，但只要我們?cè)O(shè)置了demo元素下的所有元素的統(tǒng)一樣式，那么demo元素里的三個(gè)子元素div，p，span就會(huì)出現(xiàn)樣式。

2.類選擇器（所有瀏覽器都支持類選擇器，但多類選擇器（.className1.className2）不被ie6支持。）

類選擇器根據(jù)類名來(lái)選擇，前面以”.”來(lái)標(biāo)志，是以一獨(dú)立于文檔元素的方式來(lái)指定樣式，使用類選擇器之前需要在html元素上定義類名，換句話說(shuō)需要保證類名在html標(biāo)記中存在。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>類選擇器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #2DC4CB;
			}

		</style>
	</head>
	<body>
		<div class="demo">類選擇器</div>
	</body>
</html>

效果圖：

什么是css選擇器以及css3中種常見(jiàn)的基本選擇器有哪些

3.元素選擇器（所有瀏覽器支持）
元素選擇器（標(biāo)簽名選擇器），是css3選擇器中最常見(jiàn)而且最基本的選擇器。元素選擇器其實(shí)就是文檔的元素，如html,body,p,div等等下下面例子中選擇了span元素，并設(shè)置了字體顏色為紅色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素選擇器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
			}
			span{
			    color: red;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>這里使用<span>元素選擇器</span>改變了樣式</p>
		</div>
	</body>
</html>

效果圖：

什么是css選擇器以及css3中種常見(jiàn)的基本選擇器有哪些

4.ID選擇器（所有瀏覽器都支持）

ID選擇器和上面說(shuō)的類選擇器是很相似的，在使用ID選擇器之前也需要先在html文檔中加注ID名稱，這樣在樣式選擇器中才能找到相對(duì)應(yīng)的元素，不同的是ID選擇器是一個(gè)頁(yè)面中唯一的值，我們?cè)陬愂褂脮r(shí)是在相對(duì)應(yīng)的類名前加上一個(gè)“.”號(hào)（.className）而id選擇器是在名稱前使用"#"如(#demo)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID選擇器</title>
		<style>
			#demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #FF0000;
			}

		</style>
	</head>
	<body>
		<div id="demo">ID選擇器</div>
	</body>
</html>

效果圖：

什么是css選擇器以及css3中種常見(jiàn)的基本選擇器有哪些

ID選擇器有幾個(gè)地方需要特別注意：

第一：一個(gè)文檔中一個(gè)id選擇器只充許使用一次，因?yàn)閕d在頁(yè)面中是唯一的；

第二，id選擇器不能像類選擇器一樣多個(gè)合并使用，一個(gè)元素只能命名一個(gè)id名；

第三，可以在不同的文檔中使用相同的id名，比如說(shuō)在“test.html”中給h2定了“＃important”,也可給“test1.html”中定義p的id為"#important"，但前提是不管在test.html還是test1.html中只充許有一個(gè)id叫"#important"的存在。

5.群組選擇器（所有瀏覽器都支持）

當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，元素之間用逗號(hào)分隔。群組選擇器是將具有相同樣式的元素分組在一起，每個(gè)選擇器之間使用逗號(hào)“，”隔開(kāi)，這個(gè)逗號(hào)告訴瀏覽器，規(guī)則中包含多個(gè)不同的選擇器，如果不有這個(gè)逗號(hào)，那么所表達(dá)的意就完全不同了，省去逗號(hào)就成了我們前面所說(shuō)的后代選擇器，這一點(diǎn)大家在使用中千萬(wàn)要小心加小心。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>群組選擇器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #FF0000;
			}
			p,li{
			    color: blue;
			}
			.demo1,.demo2{
			 	color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>這里是一個(gè)段落!</p>
		    <ul><li>列表</li></ul>
		    <a href="#" class="demo1">鏈接一</a><br>
		    <span class="demo2">文字文字！</span>
		</div>
	</body>
</html>

效果圖：

什么是css選擇器以及css3中種常見(jiàn)的基本選擇器有哪些

以上就是什么是css選擇器以及css3中種常見(jiàn)的基本選擇器有哪些，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：什么是css選擇器以及css3中種常見(jiàn)的基本選擇器有哪些
當(dāng)前地址：http://muchs.cn/article46/ghidhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、軟件開(kāi)發(fā)、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容