選擇器

<div id="haveID">
   <div class="haveClass">
      <h1></h1>
      <h2></h2>
      <p></p>
   </div>
</div>

常用的選擇器包括

* id選擇器

#haveID {
color:red;
}

* class選擇器

.haveClass {
color:red;
}

* Element選擇器

p {
color:red;
}

* 多選

p, div {
color:red;
}

* div裡面的p

div p {
color:red;
}

* 父節點為div的p

div > p {
color:red;
}

* div同層後面的p

div + p {
color:red;
}

* [attr = value] 某屬性等於某個值

[title = mytitle] {
color:red;
}

// 還有一些 PSEUDO Class

* 第一個子節點的p

p:first-child

* 最後一個子節點的p

p:last-child

* 偶數子節點的p

p:nth-child(even)

*  an + b節點的p

p:nth-child(an+b)

2n -> 偶數
2n + 1 -> 奇數
5n + 2 -> 除以 5 餘二

段落前面

p:before(an+b)

段落後面

p:after(an+b)

第一行

p:first-line

* 獲得焦點的input

input:focus

* 滑鼠在上面的link

a:hover

等等等…

而除了用 !important 強制以外,
樣式的採用的規則是參照

螢幕快照 2013-10-10 上午5.17.23

依序是

1. 行內樣式
2. id 選擇器
3. class 選擇器
4. element 選擇器

前面的數字贏了就不需要在比較下一個數字,而會採用優先贏的樣式

而計算是怎麼看的呢?

例如

#haveID  div ul li

這樣就是有一個id 選擇器、三個element 選擇器
數字是  0, 1, 0 ,3
而代表的是id="haveID"的元素裡面的 div 裡面的 ul 的 li 才會受到影響

這樣計算出四個數字就可以算出哪個樣式會優先採用了

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s