01_CSS 选择器

文章目录

    • 00_通配选择器
    • 01_元素选择器
    • 02_类选择器
    • 03_id选择器
    • 04_属性选择器
    • 05_后代选择器
    • 06_子代选择器
    • 07_相邻兄弟选择器
    • 08_全兄弟选择器
    • 09_交集选择器
    • 10_并集选择器

00_通配选择器

01_CSS 选择器_第1张图片

  • ’*'

01_元素选择器

01_CSS 选择器_第2张图片

02_类选择器

01_CSS 选择器_第3张图片

  • ’.’ 'class’

03_id选择器

01_CSS 选择器_第4张图片

  • ’#'

  • 本质上是后代选择器

  • 常用于给类选择器相同的元素增加属性

04_属性选择器

01_CSS 选择器_第5张图片

  • ’[]'

05_后代选择器

01_CSS 选择器_第6张图片

  • 属性之间用空格隔开
  • 直接和间接子元素均继承属性

06_子代选择器

01_CSS 选择器_第7张图片

  • ’>'
  • 直接子元素才能继承属性

07_相邻兄弟选择器

01_CSS 选择器_第8张图片

  • ’+'
  • div 后面紧挨着的 span 元素, 且必须是兄弟关系

08_全兄弟选择器

01_CSS 选择器_第9张图片

  • ’~'
  • 所有和 div 同级 span 元素

09_交集选择器

01_CSS 选择器_第10张图片

  • 相邻属性直接无需空格

10_并集选择器

01_CSS 选择器_第11张图片

  • ‘,’ 隔开

你可能感兴趣的:(前端基础)