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.