CSS选择器 | 豆包MarsCode AI刷题

97 阅读2分钟

选择器作用:查找标签,设计样式

基础选择器:1.标签选择器、2.类选择器、3.id选择器、4.通配符选择器

1.标签选择器

用法:使用标签名作为选择器,选中同名标签设置相同的样式

缺点:无法差异化同名标签的样式

2.类选择器

标签添加class = "类名"

类选择器使用 .类名

一个标签可以有多个类名 class = "名1   名2"

3.id选择器

一般配合JS使用,很少用户设置CSS样式

标签 id = "id名"

id选择器使用 #id名

4.通配符选择器

查找页面所有标签,设置相同样式,一般用于清除标签默认样式

通配选择符 : *

使用时无需调用,浏览器自动查找页面所有标签,设置相同的样式

5.复合选择器(更准确、更高效的选择目标标签)

由两个 or 多个基础选择器通过不同的方式组合而成

(1)后代选择器:选中某元素的所有后代元素

用法:父选择器 子选择器{……}

(2)子代选择器:选中某元素的子代元素(只选儿子)

用法:父选择器>子选择器{……}

(3)并集选择器:选中多组标签设置相同的样式

用法:选择器1,选择器2,……选择器n{……}(建议每个逗号后换行)

(4)交集选择器:选中同时满足多个条件的元素

用法:选择器1选择器2……选择器n{……}(多选择器之间连写,中间无其他符号)

attention:如果交集选择器中有标签选择器,标签选择器必须写在最前面

6.伪类选择器

伪类表示元素状态,选中元素的某个状态设置样式

鼠标悬停状态: 选择器:hover{……}

伪类-超链接: 选择器:link(访问前)/visited(访问后)/hover(悬停)/active(点击时)

如果要给超链接设置上述四个状态,需要按照LVHA的顺序书写

个人思考总结

在学习和使用CSS的过程中,选择器是至关重要的工具,它们决定了样式将应用于哪些HTML元素。通过这次对CSS选择器的整理和复习,我对不同类型的选择器有了更深入的理解。选择器不仅是CSS的核心组成部分,更是实现灵活、高效的样式控制的关键。每种选择器都有其独特的作用和适用场景,合理搭配使用可以大大提升开发效率和代码的可维护性。在未来的工作中,我将继续深入学习和实践这些选择器,特别是在复杂页面布局和交互设计中,充分利用复合选择器和伪类选择器的优势,提升用户体验。