CSS 3.0學習之選擇器總結

時間  2019-11-10
標籤 css 3.0 學習 選擇器 總結 欄目 CSS 简体版
原文   原文鏈接

1.元素選擇器

E { … }  /*E表明HTML元素名*/ css

例如：html

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>元素選擇器</title>
		<style type="text/css">
			div {
				background-color: grey;
				font: italic normal bold 24px normal 宋體;
			}
		</style>
	</head>
	<body>
		<div>元素選擇器</div>
	</body>
</html>

效果：前端

2.屬性選擇器

屬性選擇器顧名思義就是根據元素的屬性來爲確認的元素定義樣式。從廣義的角度看，元素選擇器是屬性選擇器的特例。屬性選擇器有以下幾種語法css3

Ø  E { … }：爲全部E元素定義樣式。
Ø  E[attr] { … }：爲具備attr屬性的元素定義樣式。
Ø  E[attr=value] { … }：爲具備attr屬性，且attr屬性爲value值的元素定義樣式。
Ø  E[attr~=value] { … }：爲具備attr屬性，且attr屬性的值爲以空格隔開的系列值，其中某個值爲value的元素定義樣式。
Ø  E[attr|=value] { … }：爲具備attr屬性，且attr屬性的值爲以連字符分隔的系列值，其中第一個值爲value的元素定義樣式。
Ø  E[attr^=value] { … }：爲具備attr屬性，且attr屬性的值爲以value開頭的字符串的元素定義樣式。
Ø  E[attr$=value] { … }：爲具備attr屬性，且attr屬性的值爲以value結尾的字符串的元素定義樣式。
Ø  E[attr*=value] { … }：爲具備attr屬性，且attr屬性的值爲包含value字符串的元素定義樣式。測試

例如：ui

 

<!DOCYTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>屬性選擇器</title>
		<style type="text/css"></style>
		<style type="text/css">
			div{
				width: 300px;
				height: 30px;
				background-color: #eee;
				border: 1px solid black;
				padding: 10px;
			}

			div[id] {
				background-color: #aaa;
			}

			div[id*=bb] {
				background-color: #999;
			}

			div[id^=bb] {
				background-color: #555;
			}

			div[id$=bb] {
				background-color: #555;
				color: #fff;
			}

			div[id=bb] {
				background-color: #111;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div>沒有任何屬性的div</div>
		<div id="aabbcc">id屬性包含bb字符串的div</div>
		<div id="bbccdd">id屬性以bb開頭的div</div>
		<div id="aabb">id屬性以bb結尾的div</div>
		<div id="bb">id屬性爲bb的div</div>
	</body>
</html>

效果：spa

 

上面定義的5個屬性選擇器他們的優先級爲依次升高。優先級高的選擇器定義的樣式會覆蓋低優先級選擇器定義的樣式。code

3.ID選擇器

Id選擇器指定的樣式會對具備指定id屬性值的元素起做用，其語法格式爲：orm

#idValue { … }視頻

例如：

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>id選擇器</title>
		<style type="text/css">
			#xx{
				width: 300px;
				height: 30px;
				border: 2px dotted black;
				background-color: #ddd;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div id="xx">id屬性值爲xx的div</div>
	</body>
</html>

效果：

對指定元素起做用的id選擇器

E#idValue { … } /*其中E爲有效的HTML元素*/

例如：

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>對指定元素起做用的id選擇器</title>
		<style type="text/css">
			div{
				width: 300px;
				height: 30px;
				border: 1px solid red;
				background-color: #ddd;
				padding: 3px;
			}

			p#xx{
				border: 2px dotted black;
				background-color: #777;
			}
		</style>
	</head>
	<body>
		<div id="xx">id屬性值爲xx的div</div>
	</body>
</html>

效果：

PS：貌似該選擇器沒多大用處，html頁面元素id值惟一。

4.Class選擇器

語法格式：

[E].className { … } /*E可選，爲有效的HTML元素*/

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>class選擇器</title>
		<style type="text/css">
			.xx{
				width: 420px;
				height: 30px;
				background-color: #ddd;
			}
			div.xx{
				border: 2px dotted black;
				background-color: #888;
			}
		</style>
	</head>
	<body>
		<div class="xx">class屬性爲xx的div元素</div>
		<p class="xx">class屬性爲p的div元素</p>
	</body>
</html>

效果：

5.包含選擇器

包含選擇器用於指定目標選擇器必須處於某個選擇器對應元素的內部。其語法格式以下：

Selector1 Selector2{ … }

例如：

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>包含選擇器</title>
		<style type="text/css">
			div{
				width: 350px;
				height: 60px;
				border: 1px dotted black;
				background-color: #ddd;
			}
			div .a{
				border: 1px solid red;
				background-color: #888;
			}
		</style>
	</head>
	<body>
		<div><p class="a">處於div以內且class屬性爲a的p元素</p></div>
		<p class="a">沒有處於div以內，但class屬性爲a的p元素</p>
	</body>
</html>

效果：

6.子選擇器

子選擇器用於指定目標選擇器必須是某個選擇器對應元素的子元素。其語法格式以下：

Selector1>Selector2 { … }

子選擇器與包含選擇器有點類似，它們的區別是：對於子選擇器，要求目標選擇器對應的元素必須是父選擇器對應元素的直接子元素才行；而包含選擇器只要求目標選擇器對應的元素位於外部選擇器對應元素的內部便可。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>子選擇器</title>
		<style type="text/css">
			div p{
				width: 400px;
				height: 40px;
				border: 2px solid red;
				background-color: #eee;
			}
			div>p{
				border:2px dotted black;
				background-color: #888;
			}
		</style>
	</head>
	<body>
		<div><p class="a">class屬性爲a的p元素，爲div的直接子元素</p></div>
		<div><section><p class="a">class屬性爲a的p元素，爲處於div內部的元素</p></section></div>
	</body>
</html>

效果：

由例子可見，子選擇器的優先級高於包含選擇器。

7.CSS3.0新增的兄弟選擇器

其語法格式以下：

Selector1 ~ Slector2 { … }

兄弟選擇器定義Selector1選擇器對應元素後面、全部能匹配Selector2選擇器的元素的樣式。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>css3新增的兄弟選擇器</title>
		<style type="text/css">
			#yy ~ .xx{
				background-color: #888;
			}
		</style>
	</head>
	<body>
		<div>百度</div>
		<div class="xx">新浪微博</div>
		<div id="yy">騰訊視頻</div>
		<div class="xx">天龍八部</div>
		<p class="xx">笑傲江湖</p>
	</body>
</html>

效果：

 

8.僞元素選擇器

CSS提供以下幾個僞元素選擇器：

Ø  :first-letter：設置指定對象內的第一個字符的樣式。

Ø  :first-line：設置指定對象內的第一行內容的樣式。

Ø  :before：與內容相關的屬性結合使用，用於在指定對象內部的前端插入內容。

Ø  :after：與內容相關的屬性結合使用，用於在指定對象內部的結尾插入內容。

:first-letter和:first-line選擇器僅對塊元素起做用。若是要對內聯元素使用該屬性，必須設定對象的height、width屬性，或者設置position屬性爲absolute，或者設置display爲block。

例如：

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>僞元素選擇器</title>
		<style type="text/css">
			p:first-letter{
				color: red;
				font-size: 20px;
			}
			section:first-line{
				font-size: 20px;
				font-weight: bold;
			}
			div:before{
				content:'我說：「';
			}
			div:after{
				content: "」";
			}
		</style>
	</head>
	<body>
		<p>we are 圖樣圖森破</p>
		<section>我只喜歡你，<br/>懂</section>
		<div>今每天氣怎麼樣？</div>
	</body>
</html>

效果：

9.CSS3.0新增的僞類選擇器

Css3.0新增的僞類選擇器主要分爲以下3類：

Ø  結構性僞類選擇器
Ø  UI元素狀態僞類選擇器
Ø  其餘僞類選擇器

9.1 結構性僞類選擇器

結構性僞類選擇器指的是根據HTML元素之間的結構關鍵進行篩選的僞類選擇器。可分爲以下幾個：

Ø  Selector:root：匹配文檔的根元素。在HTML文檔中，根元素永遠是<html>元素
Ø  Selector:first-child：定義Selector選擇器對應元素的父元素的第一個子元素的樣式。
Ø  Selector:last-child：定義Selector選擇器對應元素的父元素的最後一個子元素的樣式。
Ø  Selector:nth-child(n)：定義Selector選擇器對應元素的父元素的第n個子元素的樣式。
Ø  Selector:nth-last-child(n)：定義Selector選擇器對應元素的父元素的倒數第n個子元素的樣式。
Ø  Selector:only-child：定義Selector選擇器對應元素的樣式，Selector選擇器對應的元素必須是其父元素的惟一子節點元素。
Ø  Selector:first-of-type：定義與Selector選擇器對應元素同類型、同級的兄弟元素中的第一個元素的樣式。
Ø  Selector:last-of-type：定義與Selector選擇器對應元素同類型、同級的兄弟元素中的最後一個元素的樣式。
Ø  Selector:nth-of-type(n)：定義與Selector選擇器對應元素同類型、同級的兄弟元素中的第n個元素的樣式。
Ø  Selector:nth-last-of-type(n)：定義與Selector選擇器對應元素同類型、同級的兄弟元素中的倒數第n個元素的樣式。
Ø  Selector:only-of-type：定義Selector選擇器對應元素的樣式，Selector選擇器對應的元素必須是與它同類型、同級的兄弟元素中的惟一一個元素。
Ø  Selector:empty：定義Selector選擇器對應元素的樣式，要求Selector選擇器對應元素爲內部沒有任何子元素（包括文本節點）的元素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>結構性僞類選擇器</title>
		<style type="text/css">
			:root{
				background-color: #ddd;
			}
			body{
				background-color: #888;
			}
			li:first-child{
				border: 1px solid red;
			}
			li:last-child{
				border: 1px dotted black;
			}
			li:nth-child(2){
				background-color: green;
			}
			li:nth-last-child(2){
				color: #fff;
			}
			span:only-child{
				font-size: 30px;
			}
			p:first-of-type{
				color: red;
			}
			p:last-of-type{
				color: blue;
			}
			p:nth-of-type(2){
				font-weight: bold;
			}
			p:nth-last-of-type(2){
				font-variant: small-caps;
			}
			span:only-of-type{
				font-size: 12px;
			}
			p:empty{
				width: 150px;
				height: 30px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>經過:root定義html背景色爲<span style="width:50px;background-color: #ddd;height:30px;">#ddd</span></div>
		<ul>
			<li>童年呵，是夢中的真，是真中的夢，是回憶時含淚的微笑。</li>
			<li>童年呵，是夢中的真，是真中的夢，是回憶時含淚的微笑。</li>
			<li>童年呵，是夢中的真，是真中的夢，是回憶時含淚的微笑。</li>
			<li><span>童年呵</span>，<span>是夢中的真</span>，是真中的夢，是回憶時含淚的微笑。</li>
			<li><span>童年呵</span>，是夢中的真，是真中的夢，是回憶時含淚的微笑。</li>
		</ul>
		<div>
			<p>杜鵑花(azalea)</p>
			<p>杜鵑花(azale)</p>
			<p>杜鵑花(azalea)</p>
			<p><span>杜鵑花</span><span>(azalea)</span></p>
			<p><span>杜鵑花</span>(azalea)</p>
			<p></p>
		</div>
	</body>

</html>

效果：

 

PS：從以上代碼能夠看出:only-of-type選擇器比:only-child選擇器的優先級高，這裏讀者能夠自行測試其餘相似選擇器的優先級。

對於帶參數n的僞類選擇器，它們的參數不止能夠爲n，還能夠是odd、even或者xn+y。例如3n+1，則第1、4、7…節點將運用定義的樣式。

9.2 UI元素狀態僞類選擇器

 

 

 

UI元素狀態僞類選擇器有以下幾個：

Ø  Selector:link：定義未被訪問前的元素的樣式。（一般只能是超連接）

Ø  Selector:visited：定義已被訪問過的元素的樣式。（一般只能是超連接）
Ø  Selector:active：定義被用戶激活狀態的元素的樣式。（在鼠標點擊與釋放之間的事件）
Ø  Selector:hover：定義處於鼠標懸停狀態的元素的樣式。
Ø  Selector:focus：定義已獲得焦點的元素的樣式。
Ø  Selector:enabled：定義處於可用狀態的元素的樣式。
Ø  Selector:disabled：定義處於不可用狀態的元素的樣式。
Ø  Selector:checked：定義處於選中狀態的元素的樣式。
Ø  Selector:default：定義頁面打開時處於選中狀態（即便當前沒有被選中亦可）的元素的樣式
Ø  Selector:read-only：定義處於只讀狀態的元素的樣式。
Ø  Selector:read-write：定義處於讀寫狀態的元素的樣式。
Ø  Selector:disabled：定義處於不可用狀態的元素的樣式。
Ø  Selector::selection：定義元素中當前被選中的內容的樣式。

在上面這類僞類選擇器中，僞類選擇器前面的Selector選擇器能夠省略。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" ontent="no-cache">
		<meta http-equiv="expires" content="0">
		<title>UI元素狀態僞類選擇器</title>
		<style type="text/css">
			a:link{
				color: red;
				text-decoration: none;
			}
			a:hover{
				color: grey;
				text-decoration: underline;
			}
			a:visited{
				color: black;
			}
			:disabled{
				font-size: 19px;
			}
			:enabled{
				font-weight: bold;
				font-size: 19px;
			}
			:checked{
				outline: red solid 1px;
			}
			:default{
				outline: red solid 3px;
			}
			:focus{
				text-decoration: underline;
			}
			:read-only{
				background-color: #eee;
			}
			:-moz-read-only{
				background-color: #eee;
			}
			:read-write{
				background-color: #8e8
			}
			:-moz-read-write{
				background-color: #8e8
			}
			button:active{
				background-color: blue;
			}
			::-moz-selection{
				color: red;
				background-color: blue;
			}
			
		</style>
	</head>
	<body>
		<ol>
			<li><a href="http://www.baidu.com/" target="_blank">百度一下</a></li>
			<li><button disabled>不可用按鈕</button></li>
			<li><button>可用按鈕</button></li>
			<li>男<input type="radio" value="male" name="sex"/>女<input type="radio" value="female" name="sex"/>未知<input type="radio" value="unknown" name="sex"/></li>
			<li>
				<input type="text" readonly value="只讀文本">
				<input type="text" value="可讀寫文本">
			</li>
		</ol>
	</body>
</html>

效果：

 

9.3 其餘僞類選擇器

CSS3.0還新增了兩個特殊的僞類選擇器：

Ø  Selector:target：設置命名錨點目標元素的樣式
Ø  Selector1:not(Selector2)：設置Selector1選擇器對應元素的樣式，但排除Selector2選擇器對應的元素。
例如：

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>:target和:not僞類選擇器</title>
		<style type="text/css">
			:target{
				background-color: #ff0;
			}
			div{
				width: 400px;
				height: 50px;
				margin-top: 10px;
				border: 1px solid black;
			}
			div:not(#ai){
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#chibang">隱形的翅膀</a></li>
			<li><a href="#fangxia">放下</a></li>
			<li><a href="#ai">愛一點</a></li>
			<li><a href="#zhaogu">照顧本身</a></li>
			<li><a href="#tong">愛與痛的邊緣</a></li>
		</ul>
		<div id="chibang">
			我終於翱翔用心凝望不懼怕
		</div>
		<div id="fangxia">
			我愛你愛讓我放下
		</div>
		<div id="ai">
			天上的月露出半支角
		</div>
		<div id="zhaogu">
			你的呼吸一高一低
		</div>
		<div id="tong">
			你吻過個人臉是千百遍
		</div>
	</body>
</html>

效果：

 

That's all，thanks for read！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程