1、目前我用的多的
标签选择器<div>
类选择器 class=".div"
id选择器: id="#div"

除了这个之外
4、拥有并集选择器符号 ","
比如,多个元素都是拥有相同的样式可以使用 "," 加以区分开
image.png

5、子集选择器,选择的是父级中所有的符合条件的子元素,中间是使用空格号隔开的。
image.png
它会保含所有选择的子集,不论子一级或者二级

6、子集 ”>“ 选择器,限制于父元素为.classA>classB的所有元素
image.png
上面的过程的2333的文字颜色还是默认的颜色

7、”+“ 选择符,表示选择父元素为 <div> 元素的所有 <p> 元素。

不论是是子一级或者二级等

8、属性选择器,属性可以自定义也可以根据元素自带的属性。
image.png
123 文字颜色会发生变化,可以设置多个属性,属性用[]包围起来

9、属性选择器,属性与属性值的需要对应的选择器。
image.png

10、属性选择器,属性值的选择,有点类似正则的约定

1)、” ^ “符号,只要开头是相同的就行

image.png

123 456是有效果的

2)、” $ “符号。以定义的字段结束的匹配符号
image.png

除了最后一个,其他的都会生效的

3)、” * “符号。只要出现定义好的字段匹配符号
image.png

除了最后一个,设置的样式都会生效

4)、” ~ “符号。只要出现定义好的字段并且单词的需要独立开来的 匹配符号.
image.png

 只有123 233产生效果   

5)、” | “符号。以设置字段开始或者以设置的字段开始并且有-连接的字段。
image.png

上述的属性选择器,原则上可以写多个的,需要用[]隔开就好了,并且像前面提到的子集选择器可以混搭使用。
根据自己目前的使用,对于属性选择器,基本上没有用到,可能是UI库会用到很多的。未完待续........


kkw凯凯王
42 声望2 粉丝