什么是选择器

浏览 43

课文

CSS 选择器可以帮助我们选择元素,毕竟如何我们要对某些元素进行样式的修改,首先就是要定位到这些元素才能说去作修改。而 `选择器就是帮我们来从中选择这些元素的一种规范` 。 打个比方,就像我们要区分人群一样,我们可以根据性别区分,汉族壮族之类的民族作区分,还可以通过打标签的方式区分,甚至通过唯一的身份证号来定位人员。 ## 常见的选择器 ### 类型选择器 顾名思义,就是根据元素的类型来选择元素,就像我们根据民族来区分人群一样。 **应用场景:**由于会影响到页面的所有同类型的元素,影响范围很大,所以我们通常会用来修改比较统一的一些样式。比如从设计上来说,一个网站的文本最好使用同一个字体,文本的间距保持一致,所有的页面最好使用同样的背景色(很多网站的背景其实不是纯白色,为了保证阅读的舒适度多采用偏微暖的白色,文本也不是纯黑色而是偏灰),这些样式就应该通过类型选择器来设置。 **写法:**直接写元素类型,比如 `p { color: red; }` ,就是把所有 `p` 元素的文本设为红色。 看实例,敏锐的同学应该发现了,我们之前的例子都是使用的类型选择器。 ```html <!DOCTYPE html> <html> <head> <style type="text/css"> p { color: red; font-size: 24px; } </style> </head> <body> <h3>同学名单</h3> <p>鸣人</p> <p>柯南</p> <p>王路飞</p> </body> </html> ``` ### 类选择器 类选择器就是通过设置元素的 `class` 属性,将元素区分为不同的类别,在设置 CSS 样式时就可以针对某个类别设置样式。就像疫情期间,老实呆家里的就被打上安全的标签(类别),设置你的样式(健康码)为绿码,去过中高风险地区的就被打上危险的标签,设置你的样式(健康码)为红码。 **应用场景:**类选择器是最常用的选择器了,在网站中针对不同的按钮不同的文本等等都会事先分好类,比如错误警告的文本用红色,就会事先定义个 `.danger { color: red; }` ,之后所有的警告文本设置 `class="danger"` 即可。 **写法:** `.` + `类名` , 比如 `.danger { color: red; }` 就是设置所有类名为 `danger` 的元素文本为红色。 看实例。 ```html <!DOCTYPE html> <html> <head> <style type="text/css"> .male { color: blue; } .female { color: red; } </style> </head> <body> <h3>同学名单</h3> <p class="male">鸣人</p> <p class="male">柯南</p> <p class="female">春野樱</p> </body> </html> ``` ![image](https://qiniu.3yya.com/2669cf9121aef134b309ac5607941019/2669cf9121aef134b309ac5607941019.png) ### ID 选择器 ID 选择器与类选择器的区别在于,它是 `唯一的` ,就像身份证号一样。 *当然 ID 重复了通常也能正常运行,但为了规范考虑千万别重复!* ```html <!DOCTYPE html> <html> <head> <style type="text/css"> #mingren { color: red; } #kenan { color: green; } #xiaoying { color: blue; } </style> </head> <body> <h3>同学名单</h3> <p id="mingren">鸣人</p> <p id="kenan">柯南</p> <p id="xiaoying">春野樱</p> </body> </html> ``` ![image](https://qiniu.3yya.com/594e4aab31782926009a437b002c1e3f/594e4aab31782926009a437b002c1e3f.png)

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1