【HTML5】Web前端——第四課：CSS3新增選擇器

逍遙小丸子發表於2020-11-06
HTMLWeb前端CSSS3

知識點：CSS3 新增的選擇器、新增的屬性選擇器、新增的偽類選擇器、新增的偽元素選擇器

推薦學習網頁：CSS 選擇器（菜鳥教程）

 

1、CSS 3 簡介

CSS就是層疊樣式表，是一種用來表現HTML或XML等檔案樣式的計算機語言。而 CSS 3 就是最新的 CSS 標準。我們現在說的 CSS 3 ，指的是那些在 CSS 2.1 之後釋出的所有東西。 CSS 很早已經開始被分割成多個獨立的模組，每個模組可以獨立分級，每個模組值包含一小部分功能，所以某個進展緩慢的模組不會拖慢整個規範的指定工作。

CSS 3 的優勢是能夠使網站變得非常炫酷。 CSS 3 .0 能夠代替之前需要使用 JavaScript 、jQuery 才能實現的互動效果，可以為使用者帶來更好的體驗，特別是針對移動端介面。另外使用 CSS 3 還能減少開發和維護成功。 例如，之前想在網頁中增加一個圓角效果，通常需要選取一張背景圖片或者多張圖片實現此效果，過程繁雜。而在 CSS 3 中僅通過新增屬性模組就可以輕鬆實現該效果。

CSS 3 將完全向後相容，所以沒有必要修改現在的設計以使它們繼續運作。瀏覽器也還將繼續支援 CSS 2 。所以， CSS 3 主要的影響是可以使用新的可用的選擇器和屬性，這些允許實現新的設計效果（如動態和漸變），而且可以很簡單地設計出現在的設計效果（如使用分欄）。

在實際開發中，一個好的前端開發是以漸進增強和優雅降級的思想進行設計與開發的，即在編寫頁面時首先要保證核心功能一定能實現，使任何低端瀏覽器看到主要內容即可。而對比較高階的瀏覽器，則可以使用 CSS 3中提供的新特性模組實現高階功能，從而為使用者帶來更好的體驗。

 

2、兄弟選擇器

兄弟選擇器和 CSS 2 中的相鄰兄弟選擇器是不一樣的。相鄰兄弟選擇器是指兩個元素相鄰，擁有同一個父元素；兄弟選擇器是第一個元素之後，所有的元素 2 都會被選中，且這些元素和第一個元素擁有同一個父元素，兩個元素之間不一定要相鄰。

 選擇器名稱                                 作用               語法
兄弟選擇器

匹配當前元素的【後面的所有兄弟】元素，

前提是有相同的父元素

selector1~selector2
相鄰兄弟選擇器

匹配的相鄰的元素 - 當前元素的【後面的第一個】元素，

前提必須有相同的父元素

selector1+selector2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>兄弟選擇器-王迪</title>
		<style>
			h2~p { color: red;}
		</style>
	</head>
	<body>
		<h1>一級標題</h1>
		<p>我和h2是同輩，但是在h2上面，沒有被選中，不會變色</p>
		<h2>二級標題</h2>
		<p>我緊挨著h2後面，和h2是同輩，被選中了，會變色</p>
		<h3>三級標題</h3>
		<p>我沒有挨著h2，但是和h2是同輩，被選中了，會變色</p>
		<div>
			<p>我在div內部，和h2不是同一個父元素，沒有被選中，不會變色</p>
		</div>
	</body>
</html>

 

3、新增的屬性選擇器

屬性選擇器                           描述示例              示例說明
E[attribute^=value]用於選取帶有以指定值開頭的屬性值的元素li[title^="h"]選擇每一個title屬性的值以"h"開頭的元素
E[attribute$=value]用於選取屬性值以指定值結尾的元素li[title$="in"]選擇每一個title屬性的值以"in"結尾的元素
E[attribute*=value]用於選取屬性值中包含指定值的元素，位置不限，也不限制整個單詞li[title*="g"]選擇每一個title屬性的值包含子字串"g"的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>屬性選擇器-王迪</title>
		<style>
			li[title^="h"] { color: red;}
			li[title$="in"] { color: yellow;}
			li[title*="g"] { color: blue;}
		</style>
	</head>
	<body>
		<ul>
			<h2>各地小吃介紹</h2>
			<li title="beijing">北京： 焦圈、蜜麻花、豌豆黃、艾窩窩、炒肝爆肚</li>
			<li title="shanghai">上海： 蟹殼黃、南翔小籠饅頭、小紹興雞粥</li>
			<li title="anhui">安徽： 臘八粥、大救駕、徽州餅、豆皮飯</li>
			<li title="guangxi">廣西： 大肉棕、桂林馬肉米粉、炒粉蟲</li>
			<li title="tianjin">天津： 嗄巴菜、 狗不理包子、桂發祥大麻花、 五香驢肉</li>
			<li title="hubei">湖北： 三鮮豆皮、雲夢炒魚面、熱乾麵</li>
			<li title="xinjiang">新疆： 烤羊肉、烤饢、抓飯</li>
			<li title="hunan">湖南： 新飯、腦髓卷、米粉、八寶龜羊湯、火宮殿臭豆腐</li>
		</ul>
	</body>
</html>

 

4、新增的偽類選擇器

偽類選擇器                         作用
:root選擇文件的根元素，在 HTML 中永遠是 <html>元素
:last-child用來匹配當前元素的，父元素中，最後一個子元素。
:nth-child(n)用來匹配當前元素的，父元素中，第 n 個子元素。
:nth-last-child(n)用來匹配當前元素的，父元素中，倒數第 n 個子元素。
:only-child用來匹配當前元素的，父元素中，唯一一 個子元素。
:first-of-type用來匹配當前元素的，同級同型別元素中的，第一個元素。
:last-of-type用來匹配當前元素的，同級同型別元素中的，最後一個元素。
:nth-of-type(n)用來匹配當前元素的，同級同型別元素中的，第 n 個元素。
:nth-last-of-type(n)用來匹配當前元素的，同級同型別元素中的，倒數第 n 個元素。
:only-of-type用來匹配當前元素的，同級同型別元素中的，唯一一個元素。
:empty選擇沒有任何內容的元素（包括文字節點），這裡沒有內容指的是一點內容都沒有，哪怕是一個空格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>偽類選擇器-王迪</title>
		<style>
			ul { 
				list-style-type: none;/*清除預設的樣式符號*/
				float: left;/*浮動到同一行*/
			}
			#wz {
				clear: both;/*清除浮動塌陷*/
			}
			:root {/*根元素html被選中*/
				background-color: peachpuff;
				font-size: 30px;
			}
			li:last-child {/*li標籤,父元素的最後一個li被選中。“九州同樂”也會被選中，為什麼？*/
				color: red;
			}
			li:nth-child(3){/*li標籤,且是父元素中的第3個li被選中*/
				color: green;
			}
			li:nth-last-child(2){/*li標籤,且是父元素中的倒數第2個li被選中*/
				color: blue;
			}
			li:only-child{/*li標籤,且是父元素的唯一一個li*/
				font-weight: bolder;
			}
			li:first-of-type{/*li標籤,且是同類級同型別元素中的第一個元素*/
				border-bottom: 1px solid red ;
			}
			li:last-of-type{/*li標籤,且是同類級同型別元素中的最後一個元素*/
				border-left: 1px solid blue;
			}
			li:nth-of-type(5){/*li標籤,且是同類級同型別元素中的第5個元素*/
				color: green;
			}
			li:nth-last-of-type(4){/*li標籤,且是同類級同型別元素中的倒數第4個元素*/
				color: white;
			}
			li:only-of-type{/*li標籤,且是同類級同型別元素中唯一的一個*/
				border-right: 1px solid red ;
			}
			:empty{/*向沒有子元素（包括文字內容）的元素新增樣式*/
				background-color: red;
				width: 100px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<ul id="zuo">
			<li>春</li>
			<li>色</li>
			<li>滿</li>
			<li>園</li>
			<li>四</li>
			<li>海</li>
			<li>花</li>
			<li>團</li>
			<li>錦</li>
			<li>簇</li>
		</ul>
		<ul id="heng">
			<li>九州同樂</li>
		</ul>
		<ul id="you">
			<li>龍</li>
			<li>行</li>
			<li>天</li>
			<li>下</li>
			<li>五</li>
			<li>湖</li>
			<li>唱</li>
			<li>響</li>
			<li>吉</li>
			<li>祥</li>
		</ul>
		<p id="wz">春聯，又稱“春貼”、“門對”和“對聯”。</p>
		<span>測試</span>
		<p></p>
	</body>
</html>

 

5、新增的偽元素選擇器

/* 為某個元素的第一行文字使用樣式。 */
:first-line
/* 為某個元素中的文字的首字母或第一個字使用樣式。 */
:first-letter
/* 在某個元素之前插入一些內容。 */
:before
/* 在某個元素之後插入一些內容。 */
:after

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>偽元素選擇器-王迪</title>
		<style type="text/css">
			p {
				width: 400px;
				height: 200px;
				background-color: pink;
				text-indent: 2em;
			}
			p:first-line{/*選中p元素的第一行文字*/
				color: red;
			}
			p:first-letter{/*選中p元素中的文字的，首字母或第一個字使用樣式*/
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<p>在15歲時覺得游泳難，放棄游泳，到18歲遇到一個你喜歡的人約你去游泳，你只好說“我不會耶”。18歲覺得英文難，放棄英文，28歲出現一個很棒但要會英文的工作，你只好說“我不會耶”。人生前期越嫌麻煩，越懶得學，後來就越可能錯過讓你動心的人和事，錯過新風景。</p>
	</body>
</html>

 

 

 

============結束分割線============

相關文章