首頁 > 文章 > web前端 > css的基本選擇器是什麼

css的基本選擇器是什麼

青灯夜游原創: 2021-11-02 18:25:229458瀏覽

css的基本選擇器是指：1、通配符選擇器；2、標籤選擇器；3、類別選擇器；4、Id選擇器；5、結合元素選擇器；6、多類別選擇器。

css的基本選擇器是什麼

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

基本選擇器介紹

基本選擇器又分為六種使用方式：如、通配符選擇器、標籤選擇器、類別選擇器、Id選擇器、結合元素選擇器、多類別選擇器。
基本選擇器使用說明表。

##標籤選擇器，符合對應的HTML的標籤。 h1{color: red;}類別選擇器.class屬性值{屬性：值;}類別選擇器，為擁有指定的class屬性值的元素設定樣式。 .box{color: red;}Id選擇器#id屬性值{屬性：值;} #Id選擇器，在一個HTML 文件中，Id 選擇器會使用一次，而且只有一次。 Id選擇器以#來定義。 #box{color: red;}結合元素選擇器標籤名稱.class屬性值{屬性：值}選擇器會根據標籤名稱中包含指定的.class屬性值的元素。 p.box {color:red;}多類別選擇器

選擇器	語法格式		#範例

##通配符選擇器	*{屬性：值;}	#通用選擇器可以選擇頁面上的所有元素，並對它們套用樣式，用* 來表示。不建議使用，IE6不支持，為大型網站增加負擔。	*{width: 300px;}
#標籤選擇器	#標籤名稱{屬性：值;}

###.class屬性值.class屬性值{屬性：值; }######透過把兩個類別選擇器連結在一起，只可以選擇同時包含這些類別名稱的元素（類別名稱的順序不限）。注意：在 IE7 之前的版本中，不同平台的 Internet Explorer 都無法正確地處理多類別選擇器。 ######.box.box1{color:red;}############

通配符选择器

接下来让我们进入通用选择器实践，笔者以嵌入式的形式，将HTML页面中的h1标签和p标签中的字体颜色设置为红色。
代码块

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

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

结果图

css的基本選擇器是什麼

标签选择器

接下来让我们进入标签选择器实践，笔者以嵌入式的形式，将HTML页面中的h1标签和p标签中的字体颜色设置为红色。
代码块

<!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>

结果图

css的基本選擇器是什麼

注意：标签选择器是指给指定的标签设置样式。

代码块

nbsp;html>

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

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

结果图
现在大家应该知道了p标签为什么没有改变了，因为标签选择器的作用是给指定的标签设置样式的，接下来笔者将p标签的字体颜色设置为红色。
代码块

nbsp;html>

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

			p {
				color: red;
			}
		</style>
	

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

结果图

类选择器

接下来让我们进入类选择器实践，笔者以嵌入式的形式，使用类的属性值为.box，来完成HTML页面中的h1标签和p标签中的字体颜色设置为红色。
首先我们将HTML页面中的第一个h1标签字体颜色设置为红色。
代码块

nbsp;html>

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

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

结果图
注意：只要是class属性的值为.box的标签，不管它是什么标签，都会将字体颜色设置为红色，其余的CSS样式也是一致。
现在我们将第二个h1标签和p标签字体颜色设置为红色。
代码块

<!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>

结果图

Id选择器

接下来让我们进入id选择器实践，笔者以嵌入式的形式，通过id属性值为#box，将HTML页面中的h1标签中的字体颜色设置为红色。
代码块

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

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

结果图
注意：使用id选择器是给拥有指定的id属性值来设置样式，但是要注意在一个HTML页面中id的属性值必须是唯一的。

结合元素选择器

接下来让我们进入结合元素选择器实践，笔者以嵌入式的形式，通过h2标签class属性值为.box元素的字体颜色，设置为红色。
代码块

nbsp;html>

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

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

结果图
注意：结合元素选取器执行原理说明如下：首先是先找到h2标签，然后再去h2标签中找class属性值为.box，如果找到class属性值为.box就给其设置样式。现在大家应该知道了span标签下面的class属性值为.box为什么没有渲染的原因了。

多类选择器

接下来让我们进入多类选择器实践，笔者以嵌入式的形式，将class属性值包含.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>

css的基本選擇器是什麼

注意：多類別選擇器執行原理說明如下：首先class屬性值可以設定為多個以空格隔開即可，請舉例：如果一個class屬性值包含.box和.box1將其設定樣式，透過將兩個類別選擇器連結在一起，只可以選擇同時包含這些類別名稱的元素（類別名稱的順序不限）。如果一個多類別選擇器包含類別名清單中沒有的一個類別名，則匹配就會失敗。現在大家應該都知道了單獨的class屬性值為.box和.box1沒有被渲染了。

（學習影片分享：css影片教學）

以上是css的基本選擇器是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html的中文意義是什麼下一篇：html的中文意義是什麼

看更多