css-选择器

基本选择器

css-选择器_第1张图片

属性选择器

css-选择器_第2张图片
lang|=en 相当于 lang^=en

在这里插入图片描述

  • 比较 约等于与 包含

~= 指,有一个完整的词,整个的词是相等的

*=指, 只要有就可以,不一定要求完全相等

详情看例子

*=
css-选择器_第3张图片
~=
css-选择器_第4张图片
总结可知

*= 选择的范围是更广一些

伪类和伪元素选择器

css-选择器_第5张图片

link,visited,hover,active效果的演练:




    
    
    
    Document
    



超链接
  • 首字母
    css-选择器_第6张图片

  • 首行

css-选择器_第7张图片

  • 首个元素

css-选择器_第8张图片

nth系列选择器

css-选择器_第9张图片

  • only-of-type
    css-选择器_第10张图片
    css-选择器_第11张图片

  • only-child
    css-选择器_第12张图片

CSS 选择器参考手册
https://www.w3school.com.cn/cssref/css_selectors.asp

你可能感兴趣的:(20-css)