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

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

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

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

  • 類選擇器與元素選擇器結(jié)合
    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"]的區(qū)別：
    屬性選擇器中有波浪（?）時屬性值有value時就相匹配藏斩，沒有波浪（?）時屬性值要完全是value時才匹配躏结。
  • 元素[屬性^="value"]：選擇某個屬性的屬性值以“value”開頭的所有元素
  • 元素[屬性$="value"]：選擇某個屬性的屬性值以"value"結(jié)尾的所有元素
  • 元素[屬性*="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{ }：選擇某元素后面的所有兄弟元素
  通用兄弟選擇器和相鄰兄弟選擇器的區(qū)別：

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

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

  IE6不支持這個選擇器

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

• 偽類選擇器

  • 動態(tài)偽類
    因為這些偽類并不存在于HTML中,而只有當(dāng)用戶和網(wǎng)站交互的時候才能體現(xiàn)出來语婴，動態(tài)偽類包含兩種，第一種是我們在鏈接中呈荒溃看到的錨點偽類砰左，如:link,:visited；另外一種被稱作用戶行為偽類场航，如:hover,:active和:focus缠导。

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

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

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

  • UI元素狀態(tài)偽類
    :enabled，:disabled镀娶，:checked主要是針對于HTML中的Form元素操作立膛，最常見的比如我們type="text有enable和disabled兩種狀態(tài)，前者為可寫狀態(tài)后者為不可狀態(tài)梯码；另外type="radio"和type="checkbox"有checked和unchecked兩種狀態(tài)宝泵。
    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選擇的元素里面沒有任何內(nèi)容。

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

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

    ::selection用來改變?yōu)g覽網(wǎng)頁選中文本的默認效果

二筛峭、選擇器的優(yōu)先級是怎樣的？

選擇器按優(yōu)先級從高到低排序：

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

三陪每、class和id的使用場景

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

四挂签、使用CSS選擇器時為什么要劃定適當(dāng)?shù)拿臻g？

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

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