CSS之選擇器相關

基礎選擇器相關

• 通用選擇器
• 元素選擇器
• 類選擇器
  
  • 注意: 類名不能以數字開頭
• 分類選擇器
  
  • 如: div.waring{}
• id選擇器
• 羣組選擇器
• 後代選擇器
• 子代選擇器

複雜選擇器相關

• 兄弟選擇器
  
  • 相鄰兄弟選擇器
    
    • 如div+p{}
    • 注意: 只找與當前元素相關的後面的一個緊挨着他的兄弟元素, 如何符合則匹配, 不符合也不會向下查找
  • 通用兄弟選擇器
    
    • 如div~p{}
    • 注意: 第二個元素不必緊緊跟隨在第一個元素後面, 該選擇器匹配到的元素爲一個或多個
• 屬性選擇器
  
  • 語法
    
    • [屬性]
      
      • 匹配帶有指定屬性的元素
      • [title]: 匹配包含title屬性的所有元素
    • 元素[屬性]
    • 元素[屬性1][屬性2]
      
      • 匹配既具備屬性1又具備屬性2的元素
    • 元素[屬性名=屬性值]
      
      • 屬性名必須等且只等於屬性值, 空格也不允許
    • 元素[屬性名~=屬性值]
      
      • 屬性值中只要包含當前值即可匹配
    • 元素[屬性名^=值]
      
      • 屬性值以值開頭的元素
    • 元素[屬性名*=值]
      
      • 屬性值中包含值的元素
    • 元素[屬性名$=值]
      
      • 屬性值中以值結尾的元素
  • 須知: 上述語法中, 屬性值以單詞爲基本單元, 值以單個字符爲基本單元
    

html代碼
<div class="tdiv ">div1</div>
<div class="tdiv mm">div2</div>
<div class="tdiv nn">div3</div>
css代碼
div[class~=’mm’]可匹配div2
div[class^=’t’]可全部匹配
div[class*=’n’]可匹配div3
div[class$=’n’]可匹配div3

僞類選擇器

• 僞類分類
  
  • 鏈接僞類
    
    • :link 尚未訪問的鏈接
    • :visited 已訪問的鏈接
  • 動態僞類
    
    • :hover 鼠標懸停時
    • :active 元素被激活時
    • :focus 元素獲取焦點時(多用於文本框, 密碼框等表單元素)
  • 目標僞類
    
    • :target 用於匹配當前活動的錨點元素(而非鏈接元素)
  • 元素狀態僞類
    
    • :enabled 匹配每個已啓用的元素
    • :disabled 匹配每個被禁用的元素
    • :checked 匹配每個已被選中的input元素(單選按鈕、複選框)
  • 結構僞類
    
    • :first-child 匹配屬於其父元素的首個子元素
    • :last-child 匹配屬於其父元素的最後一個子元素
    • :empty 匹配沒有子元素的元素(包含文本)
    • :only-child 匹配是其父元素唯一子元素的元素
  • 否定僞類
    
    • 匹配非指定選擇器的每個元素
    • :not(selector)

僞元素選擇器

• :first-letter 用於選取指定元素的首字母
• :first-line 用於選取指定元素的首行文本
• ::selection 用於匹配被用戶選取的部分
• :before 用於在元素前做內容生成
• :after 用於在元素後做內容生成
  內容生成僞元素必須與content屬性聯用
  div:after{
  content: ”;
  display: block;
  clear: both;
  }