[CSS] CSS Selector(CSS 選擇子)

在CSS中,如何選取相對應的html元素呢?這就是所謂的CSS Selector,從w3schools列出了非常多的selector,以下會一一為各位解說,另外要請注意的是,我會標示IE8及IE9是否支援,請斟酌使用。

Selector 範例 對應html範例 IE8支援 IE9支援
.class .intro
會擷取出所有class是intro的元素
<p class=”intro”></p> 1376633837_camera_test 1376633837_camera_test
#id #firstname
擷取id是firstname的元素
<span id=”firstname”></span> 1376633837_camera_test 1376633837_camera_test
* *
擷取所有元素
  1376633837_camera_test 1376633837_camera_test
element p
會擷取所有的p元素
<p>…</p> 1376633837_camera_test 1376633837_camera_test
element,element div, p
會擷取所有的div及p元素
<div>…</div>
<p>…</p>
1376633837_camera_test 1376633837_camera_test
element element div p
擷取在<div>…</div>元素內部的所有<p>元素
<div>
 <section>
   <p>…</p>
 
</section>
 <p>…</p>
 
<p>…</p>
</div>
1376633837_camera_test 1376633837_camera_test
element>element div>p
擷取在<div>…</div>元素內部的直接子元素<p>
<div>
 <section>
   <p>…</p>
 </section>
 <p>…</p>
 
<p>…</p>
</div>
1376633837_camera_test 1376633837_camera_test
element+element div+p
擷取在<div>…</div>元素後的第一個<p>元素
<p>…</p>
<div>
 <section>
   <p>…</p>
 </section>
 <p>…</p>
 <p>…</p>

</div>
<p>…</p>
<p>…</p>

1376633837_camera_test

1376633837_camera_test
[attribute] [target]
擷取含有target屬性的元素
<a href=”#” target=”_blank”>test1</a>
<a href=”#”>test2</a>
1376633837_camera_test 1376633837_camera_test
[attribute=value] [target=_blank]
擷取含有target=”_blank”屬性的元素
<a href=”#” target=”_blank”>test1</a>
<a href=”#” target=”_parent”>test2</a>
1376633837_camera_test 1376633837_camera_test
[attribute~=value] [title~=word]
擷取含有title=”word”屬性的元素
<div title=”word”>test1</div>
<div title=”aword”>test2</div>
1376633837_camera_test 1376633837_camera_test
:link a:link
擷取未訪問過的連結
<a href=”#”>test1</a> 1376633837_camera_test 1376633837_camera_test
:visited a:visited
擷取訪問過的連結
<a href=”#”>test1</a> 1376633837_camera_test 1376633837_camera_test
:active a:active
擷取按住的連結
<a href=”#”>test1</a> 1376633837_camera_test 1376633837_camera_test
:hover a:hover
擷取滑鼠移過去時的連結
<a href=”#”>test1</a> 1376633837_camera_test 1376633837_camera_test
:focus input:focus
擷取當標記點focus在input欄位上的元素
<input type=”text”> 1376633837_camera_test 1376633837_camera_test