CSS-CSS Selector(選取器)

2016-09-09

在CSS裡要選取物件，並改變他們的外觀，選取的方式有以下幾種

1.Class Selector(類別選取器)

以「.」開頭加上Class名稱，一個網頁可以有多個同名的class屬性

Ex:

.wrapper{
	width:900px;
}

2.ID Selector(ID選取器)

以「＃」開頭加上ID名稱，一個網只能有一個屬於自己的ID屬性

Ex:

#title{
  font-family:"標楷體";
  color:black;
}

3.Type selectors(型態選擇器)

以物件的標籤來抓取物件

Ex:

span{
  width:900px;
}

4.Universal selector(通用選取器)

以「＊」開頭，所有物件都會套用該樣式

*{
 　font-family:"標楷體";
}

5.Descendant combinator(後代選取器)

div span，利用空格分離兩個物件，表示div下的span套用此樣式

div span{
 font-family:"標楷體";
 color:red;
 font-size:20px;
}

6.Child combinator(子選取器)

利用「＞」分辨兩個物件，div＞span，有父子關係的元素才會套用樣式，如果中間有插入其他元素則會失效

Ex:

div>span{
   font-family:"標楷體";
}

7.Adjacent sibling combinator(同層相鄰選擇器)

以「＋」分離兩個選取器，h1+p，在跟h1同一層且相鄰，會套用此樣式

Ex:

h1{
  color:red;
}
h1+p{
  color:blue;
}

8.General sibling combinator(同層選取器)

div~span，以「～」分隔兩元素，表示和div同階層的的span都會套用此樣式

Ex:

h1~p{
  color:blue;
}

9.Pseudo-classes(偽類選取器)

用來定義元素當下的樣式，通常用來設定超連結的樣式<a></a>

9-1:link //平常的樣式
9-2:visited //連結查閱後的樣式
9-3:hover //滑鼠滑入的樣式
9-4:active //滑鼠按下的樣式
9-5:focus //目標為焦點的樣式

a:link{
  color:black;
}
a:visited{
  color:blue;	
}
a:hover{
  color:yellow;
}
a:focus{
  color:purple;
}
a:active{
  color:green;
}

10.Groups of selectors(群組選取器)

以「，」分離多個元素，這樣可以多個讓不同物件套用相同的樣式

h1,p{
	color:blue;
}

碼農的學習紀錄