一、 CSS選擇器常見的有幾種？

• 通配符選擇器
  選擇所有元素：
  *{ }選擇某個元素下的所有元素:
  .demo *{ }表示類名為demo元素下的所有元素
  所有瀏覽器都支持通配符選擇器

• 元素選擇器
  元素{ }選擇文檔元素
  所有瀏覽器都支持元素選擇器

• 類選擇器
  .className{ }選擇類名為className的元素

  • 類選擇器與元素選擇器結合
    p.className{ }選擇類名為className的p元素
  • 多類選擇器
    .class1.class2{ }選擇同時有class1和class2這兩個類名的元素

  所有瀏覽器都支持類選擇器，但多類選擇器.class1.class2不被ie6支持。

• id選擇器
  #IDName{ }選擇id為IDName的元素
  ID選擇器有幾個地方需要特別注意的：

一個文檔中一個id選擇器只充許使用一次，因為id在頁面中是唯一的；
id選擇器不能像類選擇器一樣多個合并使用，一個元素只能命名一個id名；
可以在不同的文檔中使用相同的id名，比如說在test.html中給h1定了＃important
,也可以給test1.html中定義p的id為#important，但前提是不管在test.html
還是test1.html中只充許有一個id叫#important的存在。

所有瀏覽器都支持ID選擇器

• 屬性選擇器

  • 元素[屬性]：選擇有某個屬性的元素
  • 元素[屬性][屬性]：同時具有這兩個屬性的元素
  • 元素[屬性="屬性值"]：指定屬性名，并指定了該屬性的屬性值
  • 元素[屬性~="value"]：某個屬性的屬性值中有value元素
  • [屬性="屬性值"]與元素[屬性~="value"]的區別：
    屬性選擇器中有波浪（?）時屬性值有value時就相匹配，沒有波浪（?）時屬性值要完全是value時才匹配。
  • 元素[屬性^="value"]：選擇某個屬性的屬性值以“value”開頭的所有元素
  • 元素[屬性$="value"]：選擇某個屬性的屬性值以"value"結尾的所有元素
  • 元素[屬性*="value"]：選擇某個屬性的屬性值中包含子串"value"的所有元素
  • 元素[屬性|="value"]：選擇某個屬性的屬性值等于value或以value-開頭的所有元素

  屬性選擇器除了IE6不支持外，其他的瀏覽器都能支持

• 后代選擇器（E F）
  元素1 元素2{ }：選擇元素1的所有后代元素元素2
  所有瀏覽器都支的后代選擇器

• 子元素選擇器（E>F）
  元素1>元素2{ }：選擇元素1
  的所有子元素元素2
  IE6不支持子元素選擇器

• 相鄰兄弟元素選擇器（E+F）
  元素1+元素2{ }：元素1與元素2
  在同一個父元素下，元素2在元素1后面，且相鄰，此選擇器選擇的是滿足上述條件的元素2
  IE6不支持這個選擇器

• 通用兄弟元素選擇器
  元素1~元素2{ }：選擇某元素后面的所有兄弟元素
  通用兄弟選擇器和相鄰兄弟選擇器的區別：

  • 相鄰兄弟選擇器僅選擇是元素的僅與其相鄰的后面元素（選中的僅一個元素）；

  • 通用兄弟元素選擇器，選中的是元素后面的所有兄弟元素（選中的元素有多個）
    
    

  IE6不支持這個選擇器

• 分組選擇器
  元素1, 元素2：同時對元素1
  和元素2編寫樣式，常用于將具有相同樣式的元素分組在一起，簡化代碼
  所有瀏覽器都支持群組選擇器

• 偽類選擇器

  • 動態偽類
    因為這些偽類并不存在于HTML中,而只有當用戶和網站交互的時候才能體現出來，動態偽類包含兩種，第一種是我們在鏈接中常看到的錨點偽類，如:link,:visited；另外一種被稱作用戶行為偽類，如:hover,:active和:focus。

    • 錨點偽類
      a:link {color:gray;}鏈接沒有被訪問時前景色為灰色
      a:visited{color:yellow;}鏈接被訪問過后前景色為黃色
      a:hover{color:green;}鼠標懸浮在鏈接上時前景色為綠色
      a:active{color:blue;}鼠標點中激活鏈接那一下前景色為藍色
      錨點偽類的先后順序：link–visited–hover–active

    • 用戶行為偽類
      :hover用于當用戶把鼠標移動到元素上面時的效果；
      :active用于用戶點擊元素那一下的效果（正發生在點的那一下，松開鼠標左鍵此動作也就完成了）
      :focus用于元素成為焦點，這個經常用在表單元素上

    :hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。

  • UI元素狀態偽類
    :enabled，:disabled，:checked主要是針對于HTML中的Form元素操作，最常見的比如我們type="text有enable和disabled兩種狀態，前者為可寫狀態后者為不可狀態；另外type="radio"和type="checkbox"有checked和unchecked兩種狀態。
    IE6-8不支持:checked,:enabled,:disabled這三種選擇器。

  • CSS3的:nth選擇器
    :first-child選擇某個元素的第一個子元素；
    :last-child選擇某個元素的最后一個子元素；
    :nth-child()選擇某個元素的一個或多個特定的子元素；
    :nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算；
    :nth-of-type()選擇指定的元素；
    :nth-last-of-type()選擇指定的元素，從元素的最后一個開始計算；
    :first-of-type選擇一個上級元素下的第一個同類子元素；
    :last-of-type選擇一個上級元素的最后一個同類子元素；
    :only-child選擇的元素是它的父元素的唯一一個了元素；
    :only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
    :empty選擇的元素里面沒有任何內容。

  • 否定選擇器:not
input:not([type="submit"]) {border: 1px solid red;}
    給除了type="submit"以外的所有input加邊框

  • 偽元素
    ::first-line選擇元素的第一行
    ::first-letter選擇文本塊的第一個字母,主要運用于段落排版上多，比如說首字下沉
    ::before和::after這兩個主要用來給元素的前面或后面插入內容，這兩個常用content配合使用，見過最多的就是清除浮動，
    .clearfix:before,
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    }
    .clearfix:after {clear: both;}
    .clearfix {zoom: 1;}

    ::selection用來改變瀏覽網頁選中文本的默認效果

二、選擇器的優先級是怎樣的？

選擇器按優先級從高到低排序：

• !important
• 內聯樣式
• ID 選擇器
• 偽類
• 屬性選擇器
• 類選擇器
• 元素(類型)選擇器
• 通用選擇器（*）

三、class和id的使用場景

• id使用場景
  具有唯一性使用id選擇器，如js中獲取元素
• class使用場景
  公用的，類似的樣式使用類選擇器。

四、使用CSS選擇器時為什么要劃定適當的命名空間？

為了能夠更精確的定位到該元素，方便日后維護。舉個例子：

網頁中功能相似的模塊可能較多,比如導航,導航可能有頁面主導航,側邊欄導航,甚至頁腳導航,一般導航使用class類選擇器寫樣式,這時導航就不能單純的使用nav做class命名,要寫做main-nav,sidebar-nav,footer-nav,這樣不會造成樣式的污染.