CSS3 Selector

2015/11/18 阮韞澂

CSS Selector


<div style="background: yellow;">
	<h2 style="color: red;">紅色的標題</h2>
	<p style="color: green;">綠色的字</p>
	<p style="color: green;">綠色的字</p>
	<p style="color: green;">綠色的字</p>
</div>

紅色的標題
綠色的字
綠色的字
綠色的字

CSS Selector

用於內部樣式表或外部樣式表
套用屬性於所有符合規則的元素
被動套用
瞬間套用
主要的CSS使用方法

CSS 內部樣式表


<head>
	...
	<style>
		Selector{
			屬性1
			屬性2
		}
	</style>
	...
</head>


div{
	background: yellow;
}

Basic Selector

*
tag
id
class

* Selector


*{
	(Attribute)
}


*{
	margin: 0;
	padding: 0;
	font-family: 微軟正黑體,Microsoft JhengHei,黑體,SimHei,標楷體,DFKai-SB,BiauKai,全字庫正楷體,TW-Kai,'Source Sans Pro', Helvetica, sans-serif;
}

Tag Selector


TagName{
	(Attribute)
}


p{
	background: black;
	color: white;
}

Demo

Id Selector


#IdName{
	(Attribute)
}


#center{
	text-align: center;
}

Demo

Class Selector


.ClassName{
	(Attribute)
}


.blue{
	color: blue;
}

Demo

Try It!

試著以選擇器達成Demo中的效果

Relation Selector

且
或
後代
子代
緊鄰
接續

And Selector

符合所有選擇器


Selector1Selector2{
	(Attribute)
}


p.blue{
	color:blue;
}

Demo

Or Selector

符合任一選擇器


Selector1,Selector2{
	(Attribute)
}


h1,.blue{
	color:blue;
}

Demo

Inside Selector

符合Selector2且位於Selector1中


Selector1 Selector2{
	(Attribute)
}


div p{
	color:blue;
}

Demo

Child Selector

符合Selector2且是Selector1的子代


Selector1>Selector2{
	(Attribute)
}


div>p{
	color:blue;
}

Demo

NextTo Selector

符合Selector2且同層並緊鄰Selector1


Selector1+Selector2{
	(Attribute)
}


p+p{
	color:blue;
}

Demo

Follow Selector

符合Selector2且同層並位於Selector1之後


Selector1~Selector2{
	(Attribute)
}


#aa~p{
	color:red;
}

Demo

Try It!

試著以關係選擇器與標籤名達成Demo中的效果

CSS規則

And選擇器中，若有標籤名則放於最前端


div#box1{
	(Attribute)
}
span.output{
	(Attribute)
}
div#content.main.center{
	(Attribute)
}

CSS規則

Or選擇器永遠為最外層


div h2,p{
	(Attribute)
}


(div h2),(p)

CSS規則

相同選擇器中後優先於前


p{
	color:blue;
	color:red;
}

CSS規則

行內優先於選擇器


p{
	color:red;
}


<p style="color:green;">abc</p>

CSS規則

Id選擇器有最高優先權


#aa{
	color:red;
}
p{
	color:blue;
}

CSS規則

Class選擇器、屬性選擇器與Pseudo-Class擁有次於Id的優先權


.bb{
	color:red;
}
p{
	color:blue;
}

CSS規則

標籤選擇器與Pseudo-Element優先權僅高於*


*{
	color:red;
}
p{
	color:blue;
}

CSS規則

以選擇器中最高優先權先決定


#aa{
	color:red;
}
p{
	color:yellow;
}
p.bb.cc{
	color:green;
}

CSS規則

相同優先權時以數量計算


div span p{
	color:yellow;
}
div p{
	color:red;
}
p{
	color:green;
}

CSS規則

優先權完全相同時後優先於前


p{
	color:red;
}
p{
	color:green;
}

CSS規則

*與:not不加入計算


* p{
	color:red;
}
p{
	color:green;
}

CSS規則

繼承之屬性會直接被覆蓋


html>body#aa{
	color:red;
}
p{
	color:green;
}