css選擇器

簡單選擇器

• 類型選擇器：p{color:red}
• id 選擇器: #idname{color:red}
• class 選擇器.className{color:red}

僞元素

• ::before
• ::after

文本

• ::first-letter:文本的第一個字符串
• ::first-line:文本的第一段

使用僞元素不能添加對內容有實質的影響
僞元素使用雙冒號，而僞類是單冒號（通常如今瀏覽器都兼容）

僞類

• :hover：鼠標 hover
• :active：選中
• :focus：聚焦
• :link：連接
• :visited：訪問過了

• :target: 瀏覽器的 hash 值爲目標 ID

  <!--  url:www.example.com#commit -->
  <style>
      .message:target {
          color: red;
      }
  </style>
  
  <!-- 顯示的文字就會變成紅色 -->
  <p class="message" id="commit">message</p>

• :not():反選
• div:first-child:div 類型第一個元素
• div:last-child：div 類型最後一個元素
• :first-of-type:任意第一個子元素
• :last-of-type: 任意最後一個元素

（css3 新增）

• div:nth-child(2n):div 類型匹配 二、4....偶數（能夠用 odd 代替）
• div:nth-last-child(2n)：相似第一個，可是從最後開始
• :nth-of-type(N):任意子節點的 N 個
• :nth-last-of-type(N):相似第一個，可是從最後開始

僞類和僞元素的區別，僞類：更方便的類型選擇器；僞元素: 建立一個不存在於文檔的容器（元素）

子代選擇器

• 空格:所有後代
• >:最近子代

兄弟選擇器

• +:相鄰最近下一個兄弟
• ~:全部兄弟

屬性選擇器

• [href]:選擇帶有該屬性元素

  能夠用一些匹配規則:
  a[href^="https://wwww.baidu.com"]:開始
  img[href$=".jpg"]：結束
  a[href*="/about/"]：包含
  a[rel~="next"]:匹配屬性是多個以空格分開的值的其中一個
  a[lang|="en"]:能夠匹配帶斜槓的值（en,en-us）

優先級運算

第一優先：

• 無鏈接符號

第二優先級：

• 空格
• ~
• +
• >
• ||

第三優先級：

• ,