CSS常见选择器

目录

一、CSS选择器（selector）​

二、通用选择器​

三、简单选择器​

四、id注意事项​

五、属性选择器(attribute selectors)​

六、后代选择器（descendant combinator）​

七、兄弟选择器(sibling combinator)​

八、选择器组 – 交集选择器​

九、认识伪类​

十、伪类(pseudo-classes)​

十一、动态伪类（dynamic pseudo-classes)​

十二、动态伪类 - :focus​

十三、伪元素（pseudo-elements）​

十四、伪元素 - ::first-line - ::first-letter(了解)​

十五、伪元素 - ::before和::after(常用)​

---

一、CSS选择器（selector）

二、通用选择器

通用选择器：会将HTML所有的元素遍历一遍，性能较低 。

  
  
  
  
  


  
  
我是div元素
  
我是p元素

  

    
我是h2元素
    
我也是p元素  呵呵呵呵 
  

 

三、简单选择器

四、id注意事项

  
  
  
  
  


  
  
  
我是div1
  
我是div2
  
我是div3

  
我是p元素

  
我是h2标题

  
  

  

  

  
  

五、属性选择器(attribute selectors)

  
  
  
  
  


  
  
我是div元素
  
我也是div元素
  
我是p元素
  
我是h2元素

六、后代选择器（descendant combinator）

  
  
  
  
  


  
  

    啦啦啦啦  
    

      
我是p元素
      呵呵呵呵
    

    

      

        

          哈哈哈哈
        
      
    
  

  
  嘻嘻嘻
  

    嘿嘿嘿
  

七、兄弟选择器(sibling combinator)

  
  
  
  
  


  
  

    
叽叽叽叽
    
呵呵呵呵
    
哈哈哈哈
    
嘻嘻嘻嘻
    
嘿嘿嘿嘿
    
我是p元素
  

八、选择器组 – 交集选择器

  
  
  
  
  


  
  
我是div元素
  
我是p元素

  
  
  
  
  



  
我是p元素
  
我是h1元素

九、认识伪类

  
  
  
  
  


  
  
我是div1元素
  
我是div2元素
  
我是div3元素


  github

 

十、伪类(pseudo-classes)

十一、动态伪类（dynamic pseudo-classes)

  
  
  
  
  


  
  小米
  百度一下

  

  
我是div元素

 

十二、动态伪类 - :focus

十三、伪元素（pseudo-elements）

十四、伪元素 - ::first-line - ::first-letter(了解)

  
  
  
  
  


  
  

    雁门关，别名西陉关 ，坐落于我国山西省忻州市代县以北约成员国20千米的雁门山。它是长城上的一个关键大关，与宁武关、偏关并称之为“外三关”。坐落于偏关县大河上，辖四侧墙，总长度数百公里。迄今仍有30千米储存完好无损，所有用砖遮盖，沿堤岸耸立，十分壮阔。“边关丁宁岩，山连紫塞，地控大河北，鑫城携手共进强。”这也是前人对偏关的赞扬。早在春秋战国时代，这儿便是赵武灵王攻克胡林的竞技场。唐朝名将在关东建有九龙庙，宋代建有魏镇、杨三关。现有的关城始建明洪武二十三年，是重点学科文物古迹。
  

 

十五、伪元素 - ::before和::after(常用)

  
  
  
  
  


  
  

    123
    我是div元素
    abc
  

  

    123
    我是box2
    abc
  

  
  
我是box3
  
我是box4

  
  
我是box5