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)