CSS：選擇器種類

一、Class選擇器(Class selectors)

"."開頭，一個網頁中可以有多個class。

(1)CSS

.header{
    color: red;
}

(2)HTML

<div class="header">
...</div>

二、ID選擇器(ID selectors)

"#"開頭，一個網頁中只能有一個ID選擇器

(1)CSS

#header{color: red;}

(2)HTML

<div id="header">...</div>

三、通用選擇器(Universal selector)

"*"開頭，代表整張網頁都套用此設定

(1)CSS

   *{
      color: red;
    }

(2)HTML

 <div>紅色的</div>
 <p>紅色的</div>

四、型態選擇器(Type selectors)

HTML中的標籤也可以直接拿來當選擇器，如"h1"，h1{color: red;}

五、後代選擇器(Descendant combinator)

E、F，利用空白鍵來區隔兩元素，表示E元素內具有F元素才成立。

(1)CSS

h1 a {
  color: red;
}

(2)HTML

<h1><a>文字為紅色</a></h1>

六、子選擇器(Child combinator)

E > F，以">"區隔兩元素，表示有父子關係的元素才會套用，與後代選擇器不同點在於E及F之間不能再插入其他元素，否則就不是父子關係了。
(1)CSS

.header > p {
  color: red;
}

(2)HTML

<div class="header"><p>顏色為紅色的</p></div>
<div class="header"><span><p>顏色不會改變</p></span></div>

七、屬性選擇器(Attribute selectors)

可針對標籤內的屬性作進一步修改，總共分為4種類型。
1.div[title]：div內包含title屬性

div[title] {
  color: red;
}
<div title="xxx">顏色為紅色的</div>

2.div[title=myTitle]：div內的title屬性=myTitle

div[title=myTitle]{
  color: green;
}
<div title="myTitle">顏色為綠色的</div>

3.div[title~=myTitle]：只要div內的title屬性包含myTitle

div[title!=myTitle]{
  color: purple;
}
<div title="nav myTitle">顏色為紫色</div>

4.div[title|=myTitle]：div內的title屬性開頭為myTitle

div[title|=myTitle]{
  color:  blue;
}
<div title="nav myTitle">顏色無改變</div>
<div title="myTitle nav">顏色為藍色</div>

八、同層相鄰選擇器(Adjacent sibling combinator)

E + F，以"+"區隔元素，表示E與F在同一層且相鄰
1.CSS

 h1 + p{
   color: red;
 }

2.HTML

<h1>...</h1>
<p>顏色為紅色</p>
<p>顏色不會變</p>

九、同層全體選擇器(General sibling combinator)

E ~ F，以"~"區隔，表示E與F在同一層全部都套用

1.CSS

 h1 ~ p{
   color: red;
 }

2.HTML

<h1>...</h1>
<p>顏色為紅色</p>
<p>顏色為紅色</p>

十、群組選擇器(Groups of selectors)

E,F,G，以","區隔，同時對E、F、G做設定

1.CSS

h1,h2,p{
  color: red;
}

2.HTML

<h1>顏色為紅色的</h1>
<h2>顏色為紅色的</h2>
<<p>顏色為紅色的</p>

Programming Language Notes

搜尋此網誌