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)
CSS常见选择器_第1张图片

二、通用选择器
CSS常见选择器_第2张图片

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




  
  
  
  Document
  


  
  
我是div元素

我是p元素

我是h2元素

我也是p元素 呵呵呵呵

 CSS常见选择器_第3张图片

三、简单选择器
CSS常见选择器_第4张图片

四、id注意事项
CSS常见选择器_第5张图片




  
  
  
  Document
  


  
  
  
我是div1
我是div2
我是div3

我是p元素

我是h2标题

CSS常见选择器_第6张图片

五、属性选择器(attribute selectors)
CSS常见选择器_第7张图片




  
  
  
  Document
  


  
  
我是div元素
我也是div元素

我是p元素

我是h2元素

CSS常见选择器_第8张图片

六、后代选择器(descendant combinator)
CSS常见选择器_第9张图片




  
  
  
  Document
  


  
  
啦啦啦啦

我是p元素

呵呵呵呵

哈哈哈哈

嘻嘻嘻
嘿嘿嘿

CSS常见选择器_第10张图片

七、兄弟选择器(sibling combinator)
CSS常见选择器_第11张图片




  
  
  
  Document
  


  
  
叽叽叽叽
呵呵呵呵
哈哈哈哈
嘻嘻嘻嘻
嘿嘿嘿嘿

我是p元素

CSS常见选择器_第12张图片

八、选择器组 – 交集选择器
CSS常见选择器_第13张图片




  
  
  
  Document
  


  
  
我是div元素

我是p元素

CSS常见选择器_第14张图片




  
  
  
  Document
  



  

我是p元素

我是h1元素

CSS常见选择器_第15张图片

九、认识伪类
CSS常见选择器_第16张图片




  
  
  
  Document
  


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

 CSS常见选择器_第17张图片

十、伪类(pseudo-classes)
CSS常见选择器_第18张图片

十一、动态伪类(dynamic pseudo-classes)
CSS常见选择器_第19张图片




  
  
  
  Document
  


  
  小米
  百度一下

  

  
我是div元素

 

十二、动态伪类 - :focus
CSS常见选择器_第20张图片

十三、伪元素(pseudo-elements)
CSS常见选择器_第21张图片

十四、伪元素 - ::first-line - ::first-letter(了解)
CSS常见选择器_第22张图片




  
  
  
  Document
  


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

 CSS常见选择器_第23张图片

十五、伪元素 - ::before和::after(常用)
CSS常见选择器_第24张图片




  
  
  
  Document
  


  
  
123 我是div元素 abc
123 我是box2 abc
我是box3
我是box4
我是box5

 

你可能感兴趣的:(css,前端)