2013
Dec
24

CSS Selector 就是指 「#main」,「 .price」,「div」這種設定 style 的方式,下面是一個簡單的 CSS 寫法。

Example
  1. <style>
  2. #main {
  3. font-size: 18px;
  4. color: red;
  5. }
  6.  
  7. .price {
  8. font-weight: bold;
  9. }
  10.  
  11. div {
  12. text-align: left;
  13. }
  14. </style>

CSS Selector 不只是有 id , class, tag name 這幾個寫法,隨著時代的進步,現在有了不少新的 selector 方式,,如 :first-child, :before, :after, +, ~, >, =, ^=, ~= 等等,接下來就一一的說明這裡 selector 的用法。

「>」比對 Element 下一層

CSS 中常常會對 Parent , Child 下不同的 Style, 「> .class」這個會給下一層的 class 指定 style ,下面是一個簡單的範例, list 4 雖然也是用 span 包起來,但是 list 4 的 span 並不是在 「.e1」的下一層,而是 child 的 child 兩層,所以他的 style 不會被影響到。

parent > child
  1. <style>
  2. .e1 > span {
  3. color: red;
  4. }
  5. </style>
  6. <div class="e1">
  7. <span> list 1</span><br />
  8. <span> list 2</span><br />
  9. <span> list 3 </span><br />
  10. <div> <span>list 4</span> </div><br />
  11. </div>
Selector「>」
list 1
list 2
list 3
list 4

「+」比對 Element 下一個

下面是一個簡單的範例, .e2 的下一個 div 是 list 1,而 list 3 的 tag name 是 span,並不是我們指定的 div 所以不受影響, list 4 則是因為在 .e2 的下兩個 element ,所以也不會被影響到。


div + next div
  1. <style>
  2. .e2 + div {
  3. color: red;
  4. }
  5. </style>
  6.  
  7. <div class="e2"></div>
  8. <div> list 1</div>
  9. <div> list 2</div>
  10. <br />
  11. <div class="e2"></div>
  12. <span> list 3</span><br />
  13. <div> list 4</div>
Selector「+」
list 1
list 2

list 3
list 4

「~」比對 Element 的同一層

「~」會去比對所有同一層的 element ,並且這些 element 必須在原 element 的後面,來看下面的範例, list 1 是在 .e3 的上面,所以不符合這個規則, 「list 2」, 「list 3」,「list 5」都與 .e3 同一個階層,並目在 .e3 後面。

「~」和上一個 「+」有一點類似,但還是有差別的,「div + span」這個只會比對 div 的下一個 span ,而 「div ~ span」則是比對 div 後面的全部 span。

div ~ span
  1. <style>
  2. .e3 ~ div {
  3. color: red;
  4. }
  5.  
  6. </style>
  7.  
  8. <div> list 1</div>
  9. <div class="e3"></div>
  10. <div> list 2</div>
  11. <div> list 3</div>
  12.  
  13. <span> list 4</span><br />
  14. <div> list 5</div>
Selector「~」
list 1
list 2
list 3
list 4
list 5

「=」 Element Attribute

先定義一下 element 是指 「div」,「span」,「input」 這種 HTML Tag Name

attribute = value
  1. <style>
  2. input[type="text"] {
  3. color: red;
  4. }
  5. </style>
  6. <input type="text" value="test" />
Selector「=」

「~=」Element Attribute 部分相同

Attribute ~= word ,這個 selector 是指 attribute 中要存在 word 這個單字,上一個範例是要字串完全一樣,但是 「~= 」這個方式只要整個句子裡,其中一個單字相同即可,測試過中文後,發現中文也是有效果的。

Example
  1. <style>
  2. input[value ~= "string"] {
  3. color: red;
  4. }
  5. .word[data ~= "department"]{
  6. color: red;
  7. }
  8. .word[data ~= "中文"]{
  9. color: red;
  10. }
  11. </style>
  12.  
  13. <input type="text" value="test string" />
  14. <div class="word" data="house department">a b c d</div>
  15. <div class="word" data="中文 測試">中文也會有效果</div>
Selector「~=」
a b c d
中文也會有效果

「^=」Element Attribute 比對開頭字母

「^=」 這個指比對開頭的字母,只要開頭的部分相同,這個 Selector 就成立,例如下面這個範例,「test」這個字因為開頭是 te 所以 CSS Selector 會影響到這個 input ,而將文字變成紅色。

attribute ^= value
  1. <style>
  2. input[value^="te"] {
  3. color: red;
  4. }
  5. </style>
  6. <input type="text" value="test" />
Selector「^=」

「$=」Element Attribute 結尾相同

「$=」 這個指比對結尾的字母,只要結尾的部分相同,這個 Selector 就成立,例如下面這個範例,「test」這個字因為結尾是 st所以 CSS Selector 會影響到這個 input ,而將文字變成紅色。

attribute $= value
  1. <style>
  2. input[value$="st"] {
  3. color: red;
  4. }
  5. </style>
  6. <input type="text" value="test" />
Selector「$=」

「*=」Element Attribute 部分文字相同

「*=」 這個指比對片段的字母,只要部分字母相同,這個 Selector 就成立,例如下面這個範例,「itisalonglongstring」這個字因為有出現 along 所以 CSS Selector 會影響到這個 input ,而將文字變成紅色,若是我把文字切開成「It is a long long string."」,那這個比對就會失敗,因為比對的字串 「along」沒有「空白」。

Selector「*=」
attribute *= partial string
  1. <style>
  2. input[value*="along"] {
  3. color: red;
  4. }
  5. </style>
  6.  
  7. <input type="text" value="Itisalonglongstring" />
  8. <input type="text" value="It is a long long string." />

「|=」Element Attribute 內容用「-」 接起來

[class|=test] 代表 class 一定要是 test 或 prefix 為 test-

class|=user
  1. <style>
  2. input[name|=user] {
  3. color: red;
  4. }
  5.  
  6. [class|=user] {
  7. color:red;
  8. }
  9. </style>
  10. <input name="user-firstName" value="John"/> <br /><br />
  11.  
  12. <div class="user-firstName">
  13. John
  14. </div>
  15.  
  16. <div class="user">
  17. John Chen
  18. </div>
Selector「|=」


John
John Chen

「:empty」Element 完全空白

:empty 是用在整個 element 中完全沒有任何其他的 Element ,也沒有任何的文字或是空白,像一般網站的搜尋結果頁面,如果搜尋出來的結果是空白,通常我們都會再掛上一個 className 來寫法空白頁的 style ,現在你只須要使用「:empty」,就能很簡單的做到這個效果。

下面範例,一個 div 是空的,另一個 div 有輸入一些文字,這兩個 div 就能看出,第一個空白的 div 背景色被改成了紅色。

div:empty
  1. <style>
  2. div:empty {
  3. width: 100px;
  4. height: 20px;
  5. background: #c00;
  6. }
  7. </style>
  8.  
  9. <div></div>
  10. <div>Not Empty</div>
Selector「:empty」
Not Empty

「:first-child」第一個 Element

:first-child 這個是指只取得第一個 Element ,例如我有 1 個 div,裡面有 1 個 span ,但是這個 span 一定要是 div 內的第一個 。

Example
  1. <style>
  2. .ea2 div:first-child {
  3. color: red;
  4. }
  5. </style>
  6.  
  7. <div class="ea2">
  8. <div>list 1</div>
  9. </div>
  10.  
  11. <div class="ea2">
  12. <span>list 2</span><br />
  13. <div>list 3</div>
  14. </div>
Selector「:first-child」
list 1

list 2
list 3

其他參考資料


回應 (Leave a comment)