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

css的基本選擇器是什麼

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

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>
	
  • 结果图
    css的基本選擇器是什麼

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

  • 代码块

nbsp;html>

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

			p {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人,而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	
  • 结果图
    css的基本選擇器是什麼

类选择器

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

nbsp;html>

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

	
		<h1>成功不是击败别人,而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	
  • 结果图
    css的基本選擇器是什麼

  • 注意:只要是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>
  • 结果图
    css的基本選擇器是什麼

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>
  • 结果图

    css的基本選擇器是什麼

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

结合元素选择器

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

  • 代码块

nbsp;html>

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

	
		<h2>成功不是击败别人,而是改变自己。</h2>
		<span>成功不是击败别人,而是改变自己。</span>
	
  • 结果图
    css的基本選擇器是什麼

  • 注意:结合元素选取器执行原理说明如下:首先是先找到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