css 常用的符号表示 > ~ +

一、“ ”空格 后代选择器

2个元素之间使用空格分开,为后代选择器。


我是p元素

我是span元素
image.png

二、“>" 大于号 子代选择器

子代选择与后代选择器有些相似,但是子代选择器,只能选择一代,而后代会选择符合要求的所有后代



    

我是一级子代p元素我的二级子代span

我是一级子代span元素
image.png

三、“~”波浪号

a~b 表示同一父级的 a元素后面的 b元素,a,b为兄弟关系

      
  • 我是p前
  •   
  • 我是p前
  •   
  • 我是p前

我是p

      
  • 我是p后
  •   
  • 我是p后
  •   
  • 我是p后
css 常用的符号表示 > ~ +_第1张图片
image.png

四、“+” 加号,兄弟相邻选择器

a+b,选择紧接在 元素之后的所有 元素。



我是p

      
  • 我是p后
  • 我是p后
  •  
  • 我是p后
image.png

但是如果a与b不相邻,则不能被选择



我是p

我是p与ul之间的div
      
  • 我是p后
  • 我是p后
  •  
  • 我是p后
css 常用的符号表示 > ~ +_第3张图片
image.png

你可能感兴趣的:(css 常用的符号表示 > ~ +)