选择器作用:查找标签,设计样式
基础选择器: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的核心组成部分,更是实现灵活、高效的样式控制的关键。每种选择器都有其独特的作用和适用场景,合理搭配使用可以大大提升开发效率和代码的可维护性。在未来的工作中,我将继续深入学习和实践这些选择器,特别是在复杂页面布局和交互设计中,充分利用复合选择器和伪类选择器的优势,提升用户体验。