开发中常见的CSS Selector (选择器)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

常见的十种选择器

ID选择器

#the-id-selector{}

注意:ID选择器必须是惟一的,一个元素上只能用一个ID选择器

类选择器

.the-class-selector{}

注意:类选择器不是唯一的,一个元素上可以用多个类选择器，多的用空格隔开

标签选择器

tag{}

注意:如果是像使用div.container{}这种写法,即代表这个class选择器只能套用在div标签上,其他标签的container即使存在这个类选择器,也不会生效

空格 子孙选择器

.container div{}

上面这种写法,表示选取拥有container这个class的HTML元素里面的所有div,但是不包括本身,如图所示:

大于符号 儿子选择器

.container>div{}

上面这种写法,表示选取拥有container这个class的HTML元素里面的第一层中所有的DIV,如图所示:

加符号 兄弟选择器

.container+div{}

上面这种写法,表示选取拥有container这个class的HTML元素与他身处同一层紧接着的div,如果同级的兄弟不是DIV元素,则这个选择器会失效

波浪符号 ~

.container ~div{}

上面这种写法,表示选取拥有container这个class的HTML元素与他身处同一层中所有的div,即使有其他元素隔离,它也正常生效

星号 *

.container ~div{}

如果只是用一个星号的话,表示选取所有的HTML元素,我们可以通过上面组合的方式去缩小我们想要的范围,如图

属性选择器

.a[title] .a[href]

属性选择器可以让我们根据节点的属性值来找到我们想要选取的节点,可以根据字符的某些属性来选择,比如开头是以什么开始,以什么结束,选择自己想要的节点,或者出现的某个字段

伪类选择器

.a:visited{} .a:hover

用来选取普通选择器不能表达的信息,比如滑动到元素上,点击等等,选择偶数基数节点。更多的伪类选择器用法可以查看 伪类选择器的用法