2013
Dec
24

CSS Selector

Tags:
簡中版

網頁好讀版


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. }
  10. </style>
  11. <input name="user-firstName" value="John"/> <br /><br />
  12.  
  13. <div class="user-firstName">
  14.     John
  15. </div>
  16.  
  17. <div class="user">
  18.     John Chen
  19. </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

其他參考資料

網頁好讀版

This post was last modified by puritys

Copyright &copy; 2014 PURITYS.COM. All rights reserved.