CSS 筆記之 CSS 選擇器

来源:https://www.cnblogs.com/huangzenglie/archive/2018/03/12/8552470.html
-Advertisement-
Play Games

閱讀目錄 介紹 CSS 的基本語法格式 介紹 基礎選擇器 介紹 組合選擇器 介紹 偽選擇器 介紹 其他 一、CSS 的基本語法格式 代碼： 運行結果為： 段落是紅色的。 註意： 上面是一個簡單的演示示例 重點看 <style> 元素 CSS 語法的一般形式是 selector{ property: ...


閱讀目錄

一、CSS 的基本語法格式

代碼：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>段落是紅色的。</p>
	</body>
</html>

運行結果為：

段落是紅色的。


註意：

  1. 上面是一個簡單的演示示例
  2. 重點看 <style> 元素
  3. CSS 語法的一般形式是 selector{ property: value };
  4. 這篇文章主要講解的是 selector(選擇器)，下麵會為每種選擇器舉一個例子
返回頂部


二、基礎選擇器

基礎選擇器分為：

1、類型選擇器

代碼：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>這個段落是紅色的。</p>
		<p>這個段落也是紅色的。</p>
		<p>這個段落還是紅色的。</p>
	</body>
</html>

運行結果為：

這個段落是紅色的。

這個段落也是紅色的。

這個段落還是紅色的。


註意：

  1. 上面的重點代碼是 p{ color: red; }
  2. 是 <p> 元素作為選擇器
  3. 效果是當指定 <p> 元素的字體顏色為紅色時，所有段落的字體都會變成紅色
  4. 絕大多數的元素都可以作為選擇器，例如： <h1> 、<h2> 、<a> 、<div> 等等
返回 基礎選擇器目錄

2、類選擇器

代碼：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			.example{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<p class="example">這個段落的背景顏色是黃色的。</p>
		<p>這個段落沒有設置背景顏色。</p>
	</body>
</html>

運行結果為：

這個段落的背景顏色是黃色的。

這個段落沒有設置背景顏色。


註意：

  1. 上面的重點代碼是 .example{ background-color: yellow; } 和包含了 class 屬性那一行的代碼，註意這裡的 example 只是一個名稱，可以用其他詞來代替
  2. 設置了 class 屬性的段落，顯示的效果為背景顏色變成黃色
返回 基礎選擇器目錄

3、id 選擇器

代碼：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			#example{
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<!--最好在同一個 HTML 文檔中所有的 id 名稱都不相同-->
		<p id="example">這個段落的字體變大了。</p>
		<p>這個段落沒有設置字體的大小。</p>
	</body>
</html>

運行結果為：

這個段落的字體變大了。

這個段落沒有設置字體的大小。


註意：

  1. 上面的重點代碼是 #example{ font-size: 50px; } 和包含了 id 屬性那一行的代碼，註意這裡的 example 也只是一個名稱，可以用其他詞來代替
  2. 設置了 id 屬性的段落，顯示效果為字體變大了
  3. id 選擇器和類選擇器很相似，但是應用場景不太一樣
  4. id 選擇器匹配的 id 名稱最好是唯一的，即在同一個 HTML 文檔中最好每個 id 的名稱都不相同，例如上面的代碼中有一個段落的 id 名稱已經是 example 了，那麼其他段落就不要再用同一個 id 名稱來設置字體大小了
  5. class 名稱在同一個 HTML 文檔中可以相同，所以說通常設置段落的格式時，用類選擇器比用 id 選擇器更加合適一點
返回 基礎選擇器目錄


4、通用選擇器

代碼：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			*{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>我是紅色的。</h1>
		<h3>我是紅色的。</h3>
		<p>我也是紅色的。</p>
		<a href="http://www.baidu.com">我還是紅色的</a>
	</body>
</html>

運行結果為：

我是紅色的。

我是紅色的。

我也是紅色的。

我還是紅色的

註意：

  1. 上面的重點代碼是 *{ color: red; }
  2. * 是通用選擇器，顯示的效果為所有元素的字體都變成了紅色
返回 基礎選擇器目錄


5、屬性選擇器

代碼1：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			[href]{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>匹配屬性為 href 的元素：</p>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

運行結果為：

匹配屬性為 href 的元素：

百度

註意：

  1. 上面的重點代碼是 [href]{ color: red; } 和含有 href 屬性的那一行代碼
  2. <a> 元素裡面設置了 href 屬性，所以顯示的效果為紅色

代碼2：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			[href="#top"]{
				color: red;
			}
			[href="#top1"]{
				color: gray;
			}
		</style>
	</head>
	<body>
		<p>完全匹配，只匹配屬性和值都相同的元素：</p>
		<a href="#top">返回頂部</a>
		<br />
		<a href="#top1">返回 基礎選擇器目錄</a>
	</body>
</html>

運行結果為：

完全匹配，只匹配屬性和值都相同的元素：

返回頂部
返回 基礎選擇器目錄

註意：

  1. 上面代碼是完全匹配的示例
  2. [href="#top"]{ color: red; } 匹配屬性和屬性值為 href="#top" 的 <a> 元素，顯示效果為紅色字體
  3. [href="#top1"]{ color: gray; } 匹配屬性和屬性值為 href="#top1" 的 <a> 元素，顯示效果為灰色字體

代碼3：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			[href*=baidu]{
				color: orange;
			}
		</style>
	</head>
	<body>
		<p>通過屬性和屬性值中的字元串進行匹配：</p>
		<a href="http://www.baidu.com">百度</a>
		<br />
		<a href="https://www.tieba.baidu.com/">百度貼吧</a>
	</body>
</html>

運行結果為：

通過屬性和屬性值中的字元串進行匹配：

百度
百度貼吧

註意：

  1. 上面的代碼通過字元串進行匹配，屬性為 href 以及屬性值中有 baidu 這個字元串的元素都能匹配上
  2. 上面例子中，兩個鏈接裡面都含有 baidu 這個字元串，所以顯示效果為字體是橘色的
  3. 當然，你將代碼改成 [href*=w]{ color: orange; } 時，它們也能匹配上，因為它們的鏈接裡面都含有 w 字元

屬性選擇器還有很多，這裡只列舉了其中的三種

其他的屬性選擇器可以參考 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors


返回 基礎選擇器目錄

返回頂部


三、組合選擇器

組合選擇器：

1、A + B{ property: value; }

代碼：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			p + span{
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<p>這是一個段落。</p>
		<span>這是一段測試文字</span>
		<p>這是另外一個段落。</p>
		<br />
		<span>這是另外一段測試文字</span>
	</body>
</html>

運行結果為：

這是一個段落。

這是一段測試文字

這是另外一個段落。


這是另外一段測試文字

註意：

  1. 上面最重要的代碼是 p + span{ background-color: orange; } ，表示 <p> 元素後面的 <span> 元素的背景顏色設置成橘色
  2. 這裡要註意一個很重要的前提條件：<span> 元素必須直接跟在 <p> 元素的後面
  3. 上面的例子中，我在它們兩個之間插入了一個換行元素 <br /> 之後，<p> 元素後面的 <span> 元素就不能被匹配到了
返回 組合選擇器目錄

2、A ~ B{ property: value; }

代碼：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			p ~ span{
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<p>這是一個段落。</p>
		<span>這是一段測試文字</span>
		<p>這是另外一個段落。</p>
		<br />
		<span>這是另外一段測試文字</span>
	</body>
</html>

運行結果為：

這是一個段落。

這是一段測試文字

這是另外一個段落。


這是另外一段測試文字

註意：

  1. 這個選擇器與上面的那個選擇器很相似
  2. 這個選擇器也是可以匹配 <p> 元素後面的 <span> 元素，只是這兩個元素之間就算插入了其他元素，它也能夠匹配
  3. 所以顯示的結果才會是兩段文字的背景顏色都是橘色
返回 組合選擇器目錄

3、A > B{ property: value; }

代碼：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			div > span{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<span>測試文字1</span>
			<p>
				<span>測試文字2</span>
			</p>
			<span>測試文字3</span>
		</div>
	</body>
</html>

運行結果為：

測試文字1

測試文字2

測試文字3

註意：

  1. 上面最重要的代碼是 div > span{ background-color: yellow; } ，表示將 <div> 元素的直接子元素 <span> 的背景顏色設置為黃色
  2. 要註意的一個很重要的點是：直接子元素
  3. 上面例子中 <span>測試文字2</span> 是 <p> 的直接子元素，不是 <div> 的直接子元素，所以它無法被匹配
返回 組合選擇器目錄

4、A B{ property: value; }

代碼：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			div span{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<span>測試文字1</span>
			<p>
				<span>測試文字2</span>
			</p>
			<span>測試文字3</span>
		</div>
	</body>
</html>

運行結果為：

測試文字1

測試文字2

測試文字3

註意：

  1. 這個選擇器與上一個選擇器很相似
  2. 這個選擇器是匹配 <div> 元素下的所有 <span> 元素
  3. 註意是所有，而不是子元素
返回 組合選擇器目錄

返回頂部


四、偽選擇器

偽選擇器：

1、偽類選擇器

代碼1：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			a:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>滑鼠懸浮在下麵這個鏈接上的時候，鏈接會變成紅色：</p>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

運行結果為：

滑鼠懸浮在下麵這個鏈接上的時候，鏈接會變成紅色：

百度

註意：

  1. 上面最重要的代碼是 a:hover{ color: red; }
  2. 顯示的效果為：當你將滑鼠放置在上面的連接上時，鏈接變成紅色

代碼2：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			p:first-child{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<p>這是 body 的第一個子元素</p>
		<div id="1">
			<p>這是 id="1" 的 div 的第一個子元素</p>
			<p>這是  id="1" 的 div 的第二個子元素</p>
		</div id="2">
		<div>
			<span>這是 id="2" 的 div 的第一個子元素</span>
			<p>這是 id="2" 的 div 的第二個子元素</p>
		</div>
	</body>
</html>

運行結果為：

這是 body 的第一個子元素

這是 id="1" 的 div 的第一個子元素

這是 id="1" 的 div 的第二個子元素

這是 id="2" 的 div 的第一個子元素

這是 id="2" 的 div 的第二個子元素


註意：

  1. 上面最重要的代碼是 p:first-child{ background-color: yellow; }
  2. 表示某個父元素的第一個子元素如果是 <p> ，那麼該 <p> 元素的背景顏色將被設置為黃色
  3. 例如上面的例子，<body> 的第一個子元素是 <p> ，所以該 <p> 元素的背景顏色被設置為黃色
  4. 同樣，id="1" 的 <div> 元素的第一個子元素是 <p> ，所以該 <p> 元素的背景顏色也被設置成黃色
  5. 但是，id="2" 的 <div> 元素的第一個元素是 <span> ，<p> 元素是第二個子元素，所以它不能被匹配

代碼3：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			p:nth-child(1){
				background-color: yellow;
			}
			p:nth-child(2){
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<p>這是 body 的第一個子元素</p>
		<div id="1">
			<p>這是 id="1" 的 div 的第一個子元素</p>
			<p>這是  id="1" 的 div 的第二個子元素</p>
		</div id="2">
		<div>
			<span>這是 id="2" 的 div 的第一個子元素</span>
			<p>這是 id="2" 的 div 的第二個子元素</p>
		</div>
	</body>
</html>

運行結果為：

這是 body 的第一個子元素

這是 id="1" 的 div 的第一個子元素

這是 id="1" 的 div 的第二個子元素

這是 id="2" 的 div 的第一個子元素

這是 id="2" 的 div 的第二個子元素


註意：

  1. p:nth-child(1){ background-color: yellow; } 與 p:first-child{ background-color: yellow; } 的效果一模一樣
  2. 上面還有一段這樣的代碼 p:nth-child(2){ background-color: gray; } ，表示如果某個父元素的第二個子元素為 <p> ，那麼將該 <p> 元素的背景設置為灰色
  3. 當然，該選擇器的用法不止這些，具體參考 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
返回 偽選擇器目錄

2、偽元素選擇器

偽元素選擇器是 CSS3 中的用法

例如： 
/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

具體用法參考 https://developer.mozilla.org/en-US/docs/Web/CSS/::after

返回 偽選擇器目錄

返回頂部


五、其他

CSS 的選擇器大概可以分為三大類：基礎選擇器、組合選擇器、偽選擇器

這三大類可以單獨使用，也可以混合使用

例如：

<!DOCTYPE html>
<html>
	<head>
		<title>這是網頁標題</title>
		<style type="text/css">
			/*<style> 元素裡面的是 CSS 代碼*/
			p#test{
				color: red;
			}
		</style>
	</head>
	<body>
		<p id="test">這是一個段落。</p>
		<p>這也是一個段落。</p>
	</body>
</html>

運行結果為：

這是一個段落。

這也是一個段落。


註意：

  1. 上面是類型選擇器和 id 選擇器的組合
  2. 只有當同時滿足兩種選擇器才能夠匹配

CSS 參考文檔 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

返回頂部

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS學習——自動定位
    最近在項目中需要做自動定位功能，就是你在參加會議通過掃描二維碼簽到的時候自動定位並將你的定位信息在簽到中上傳，這樣可以避免我們進行假簽到。在這個功能中，主要用到的是系統自帶的定位模塊，首先我們是需要配置定位功能的參數，然後當我們定位成功時調用特定的方法進行相應操作就可以了，當然，在定位失敗時我們也可 ...
  • iOS - runtime 常用方法舉例說明
    使用的自定義類，如下： 動態變數控制 動態添加方法 動態交換兩個方法的實現 攔截並替換方法 在方法上增加額外功能 對runtime進行歸納總結，代碼如下: 1、載入運行時頭文件： 2、具體實現代碼： ...
  • Expo大作戰(十一)--expo中的預載入和緩存資產(Preloading & Caching Assets),expo中的圖標 (Icon)
    簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...
  • Expo大作戰(十)--expo中的App Icon,expo中的Assets,expo中的ErrorHandling錯誤處理
    簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...
  • Expo大作戰(九)--expo的工作原理，以及版本發行說明
    簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，將全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...
  • Android熱修複技術原理詳解（最新最全版本）
    通過閱讀本文，你會對熱修複技術有更深的認知，本文會列出各類框架的優缺點以及技術原理，文章末尾簡單描述一下Tinker的框架結構。本文框架： 1. 什麼是熱修複？ 2. 熱修複框架分類 3. 技術原理及特點 4. Tinker框架解析 5. 各框架對比圖。 ...
  • 跨域請求的常用方式及解釋
    同源策略 首先基於安全的原因，瀏覽器是存在同源策略這個機制的，同源策略阻止從一個域載入的腳本去獲取另一個域上的文檔屬性。也就是說，受到請求的 URL 的域必須與當前 Web 頁面的域相同。這意味著瀏覽器隔離來自不同源的內容，以防止它們之間的操作。 js跨域是指通過js在不同的域之間進行數據傳輸或通信 ...
  • Css 分類 屬性 選擇器
    Css 層疊樣式表 美化頁面的小工具 分類： 內聯 （行內）在標簽內部以屬性的形式呈現，屬性名style 內嵌 head標簽內以標簽形式呈現，標簽名style 外部 head標簽內 加link標簽 引入外部文件 *.css <link rel="stylesheet" type="text/css" ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類