1. 程式人生 > 實用技巧 >使用CSS選擇器

使用CSS選擇器

基本選擇器

  • 通用選擇器 * :匹配文件中所有元素
  • 型別選擇器:指定元素型別可以選取文件中該元素所有例項
  • 類選擇器:根據class屬性匹配元素,.<類名>;<元素型別>.<類名>
  • ID選擇器:根據id屬性匹配元素,#<id>;<元素型別>#<id>
  • 屬性選擇器:匹配指定條件的屬性的元素

符合選擇器

  • 並集選擇器:多個選擇器使用逗號隔開
  • 後代選擇器:兩個條件使用空格隔開
  • 子選擇器:使用>隔開,選擇直接子元素
  • 兄弟選擇器:相鄰兄弟:+隔開,緊跟著的元素(一個);普通兄弟:~隔開,不要求相鄰

偽元素選擇器

  • ::first-line 匹配文字塊的首行
  • ::first-letter匹配文字塊首字母
  • :before和:after在元素前後插入內容,設定content屬性的值指定要插入的內容
  • css生成器:
    body {
     counter-reset: paracount;  /*初始化計數器,預設值為1   */
    }
    p:before {
      content: counter(paracount) "."; /*使用計數器*/
    counter-increment: paracount;    /*計數器增加,預設增1*/
    }