基础选择器

基础选择器是选择器中最简单的类型,它包括标签选择器、类选择器、id选择器、通配符选择器

标签选择器

注意:选择的是一类标签而不是单独一个,另无论之后做网页的时候嵌套的多深,都能找到对应的标签。
在这里插入图片描述

类选择器

所有的标签都有class属性,class属性值被称为类名,一个标签可以有多个类名,中间用空格隔开,类名可以重复,类选择器能选中一个或者多个元素。
在这里插入图片描述

id选择器

每个标签都有id属性,id后面的属性值就相当于是这个元素的身份证,是唯一的(一般使用CSS时,不使用id进行美化),需要注意的是一个选择器只能右一个id值,一个id值只对应一个选择器。
在这里插入图片描述

通配符选择器

*代表的选择HTML页面中的全部标签,通常用于清除外边距与内间距

*{
	margin:0;
	padding:0;
}

复合选择器

后代选择器

选择器与选择器之间用空格隔开,后代包括儿子、孙子等等
在这里插入图片描述

子代选择器

选择器与选择器之间用>隔开,就是找第一个选择器中儿子,注意,子代只包括儿子,可以看到,孙子元素没有改变字体样式,这个就是与后代选择器的区别。
在这里插入图片描述

并集选择器

可以同时根据不同的选择条件选择多个标签,中间用,隔开
在这里插入图片描述

交集选择器

需要同时满足多个选择条件,如果选择条件里面包含标签 名,标签名写在最前面。选择器与选择器之间没有间隔,连这些。
在这里插入图片描述

伪类选择器

伪类选择器包含很多,其中常见的就是hover选择器,鼠标悬停时的状态
在这里插入图片描述
在这里插入图片描述
鼠标悬停时会变成天蓝色(截屏软件直接把鼠标搞没了)
伪类选择器还有很多,l比如link(未访问链接)、visited(已访问链接)等等

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐