選擇器類型

1. 基礎選擇器

例子：

 * {
    margin: 0;
    padding: 0;
  }

  #id-selector{
    color: #333;
  }

  .class-selector{
    background: #ccc;
  }

  p {
    font-size: 20px;
  }

class 和 id 的使用場景?

class：頁面上某一類元素有共同的特征骂铁，可用class
id：頁面上元素有獨一無二的特征，可用id晰房。

2. 組合選擇器

3. 屬性選擇器

input[type=password]{
  
      }

4. 偽類選擇器

5. 偽元素選擇器

a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么兜叨？

此四個選擇器的權限都是一致的穿扳，但是會根據(jù)用戶動作不同而產(chǎn)生不同的反應。
順序：

1. a:link選擇未被訪問的鏈接国旷，鏈接沒有被點擊或者沒有被鼠標停留時矛物；
2. a:hover選擇當鼠標指針浮動在鏈接上方時，此時hover覆蓋link元素
3. a:active當鼠標在一個鏈接上點擊時跪但，它就會被激活履羞，此時active覆蓋hover
4. a:visited當鼠標點擊完畢，即訪問完成時屡久，并永久覆蓋active

以下選擇器分別是什么意思?

#header{
    匹配id="header"的元素
}              
.header{
    匹配class="header"的元素
}
.header .logo{
    匹配class="header"元素后代class="logo"的元素
}
.header.mobile{
    匹配class="header"元素和class="mobile"元素
}
.header p, .header h3{
    匹配class="header"元素后所有P標簽忆首，
    和匹配class="header"元素后所有h3標簽
}
#header .nav>li{
    匹配id="header"的元素中class="nav"所有后代元素li
}
#header a:hover{
    匹配id="header"的元素中所有鼠標懸停其上的a標簽
}
#header .logo~p{
    匹配id="header"的中class="logo"元素之后的同級元素p
}
#header input[type="text"]{
    匹配id="header"的元素中屬性為type="text"的所有input
}

div:first-child、div:first-of-type被环、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）

div:first-child {
    等同于nth-first-child(1)
    匹配父元素的第一個div元素
}
div :first-child{
    匹配div標簽下第一個任意元素
}

div:first-of-type{
    等同于nth-of-type(1)
    匹配父元素下使用div的第一個子元素
}
div :first-of-type{
    匹配div標簽下任意標簽的第一個元素
}

選擇器優(yōu)先級

從高到低分別是

1. 在屬性后面使用!important會覆蓋頁面內任何位置定義的元素樣式
2. 作為style屬性寫在元素標簽上的內聯(lián)樣式
3. id選擇器
4. 類選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義

!important為最高級糙及，藐視一切。
其余可按照各類選擇器分類：1. 內聯(lián)樣式為A類筛欢；2. id選擇器為B類浸锨；3.類，屬性選擇器和偽類選擇器為C類版姑；4.標簽選擇器柱搜、偽元素為D類
然后數(shù)一下ABCD類那個多，其中A>B>C>D

運行如下代碼剥险，解析下輸出樣式的原因聪蘸。

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

原因

.item1:first-child匹配class="item1"的第一個元素，故aa字體變?yōu)榧t色表制；
first-of-type匹配class="item1"其父元素下任意標簽的第一個元素健爬，故p標簽中背景為藍色；然后h3標簽有兩個夫凸，但是只取第一個，故bb字體的背景變?yōu)樗{色阱持。

參考答案