[基本Selector]

常用selector如下

基本选择器

1. 通配符选择器（＊）
2. id选择器（#ID）
3. 类选择器（.className）
4. 元素选择器(E)
5. 后代选择器（E F）
6. 子元素选择器(E>F)
7. 相邻兄弟元素选择器(E + F)
8. 群组选择器（selector1,selector2,...,selectorN）

Basic Selectors

• Type selectors
• Class selectors
• ID selectors
• Universal selectors
• Attribute selectors 屬性selectors

通配符选择器（＊）

用来选择所有元素，也可以选择某个元素下的所有元素

* {color:red;}
div * {color:blue;}

元素选择器(E)

是css选择器中最常见而且最基本的选择器。就是文档的元素，如html,body,p,div等等

div {color:blue;}

類选择器（.className）

是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在，这样才能选择类

E.className 匹配E元素中符合className指定樣式的元素

html:

<div>no do</div>
<div class="noBlue" >box no blue</div>
<div class="boxName">box class</div>

css:

.boxName {color:blue;}
div.noBlue {color:red;}  /*E元素中匹配類名為noBlue的元素*/

id选择器（#ID）

指定元素id屬性

群組選擇器（selector1,selector2,...,selectorN）

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开。 CSS3支持

div p , div + p {color:red;}

組合選擇器

假設html如下

<p>上一個結點</p>
<div>
  <p>子元素(Child selectors)F元素</p>
  <p>
    <em>後代元素(descendant selectors)F元素</em>
  </p>
</div>
<p>相邻兄弟选择器（Adjacent sibling selector）</p>
<p>相鄰後元素|</p>

• 后代选择器（Ｅ Ｆ）

  E为祖先元素，Ｆ为后代元素

• 子元素选择器(E>F)

  子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。这和后代选择器（Ｅ Ｆ）不一样，在后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以。

  IE6不支持子元素选择器

• 相邻兄弟元素选择器(E + F)

  相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。 IE6不支持这个选择器

• 通用兄弟选择器(E ~ F)

  通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。

  IE6不支持这个选择器

補充：

1. 後代selector v.s 子selector :

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。也就是孫子輩的都有效

e.g. 如下可以指定div內的em(孫子)

<style>div em {color:red;}</style>
<div>This is a <p><em>show red</em></p> heading</div>

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。也就是孫子輩的無效

e.g. 如下不可以指定div內的em(孫子)

<style>div > em {color:red;}</style>
<div>
    <p><em>no red</em></p>
    <em>show red</em> 
</div>

2. 相鄰selector(Adjacent sibling selector) :

指元素相鄰的後一個元素

<style>div p {color:red;}</style>
<div>This is a heading</div>
<p>show red</p>

參考

前端工程師手冊-CSS選擇器

Pseudo-elements

如果您对CSS选择器还不太了解，或者说不太清楚CSS有哪些选择器，个人建议你先阅读以下几篇文章，这样更有助于帮助你阅读本文后面的内容：

《CSS3基本选择器》

《CSS3属性选择器》

《CSS3伪类选择器》

《CSS选择器优化》