CSS复习之选择器

目录

一、常用选择器

1.1元素选择器

1.2id选择器

1.3class选择器

二、复合选择器

2.1交集选择器

2.2并集选择器

三、关系选择器

3.1子元素选择器

3.2后代选择器

3.3兄弟选择器

四、属性选择器

五、伪类选择器

六、伪元素的选择器

七、超链接的伪类


一、常用选择器

1.1元素选择器

作用:根据标签名来选中指定的元素

语法:标签名{}

例:p{}、h1{}

1.2id选择器

作用:根据元素的id属性值来选中一个元素

语法:#id属性值{}

例:#box{}、#red{}

1.3class选择器

作用:根据元素的class属性值选中的一组元素

语法:.class属性值{}

例:.blue{}、.red{}

二、复合选择器

2.1交集选择器

作用:选中同时符合多个条件的元素

语法:选择器1选择器2{}

例:div.red{}

2.2并集选择器

作用:同时选中多个选择器对应的元素

语法:选择器1,选择器2,选择器3{}

三、关系选择器

CSS复习之选择器_第1张图片

3.1子元素选择器

作用:选中指定父元素的指定子元素

语法:父元素 > 子元素

3.2后代选择器

作用:选中指定元素内的指定后代元素

语法:祖先 后代

3.3兄弟选择器

作用:选择下一个兄弟

语法:前一个,下一个

四、属性选择器

选择title元素:

CSS复习之选择器_第2张图片

五、伪类选择器

CSS复习之选择器_第3张图片

:not() 否定伪类:将符合条件的元素从选择器中去除

 CSS复习之选择器_第4张图片

六、伪元素的选择器

CSS复习之选择器_第5张图片

七、超链接的伪类

 CSS复习之选择器_第6张图片

你可能感兴趣的:(vue实战之路,css,前端,html5)