山地人

课10.认识CSS里的选择器

山地人
山地人
2021-05-13

项目下载地址:前往GitHub

课10.认识CSS里的选择器——大纲

什么是CSS选择器

在前面的课程中,我们已经学习了一些CSS的样式如何定义和使用的知识。之前的课程中,我们学习了两种样式,分别是:类样式标签样式

如果你没有忘记,你应该知道,类样式和标签样式的代码长这个样子:

<style>
/* 类样式 */
.title {
background-color: #58bfff;
}
/* 标签样式 */
p {
font-size: 14px;
}
</style>

这里的.title有个专门的名称叫做类选择器,对应的p就被称为标签选择器选择器帮我们定位哪些元素需要应用我们定义的那些规则

比如.title这个类选择器,会帮我们找到所有页面上class="title"的元素,然后应用.title后面{}里定义的background-color: #58bfff;样式规则。

p标签选择器,会找到所有页面上的p标签,然后应用p后面{}大括号里定义的font-size: 14px;的规则。

除了之前我们讲过的这两种选择器,我们再来看一种新的选择器——ID选择器

<style>
#login-user {
font-size: 14px;
}
</style>
<input id="login-user" >

这里的#login-user是一个ID选择器。和类选择器类似,类选择是以点.开头,我们的ID选择器则是以井号#开头。

ID选择器,顾名思义,当然是作用在id名称相同的元素上。我们之前没有讲过id属性,这里给不了解这个概念的同学,做一点补充。HTML中,我们可以给标签添加id,只需要在要添加id的元素里加上id="xxx"。当然,和我们生活中每个人都有自己的身份证一样,身份证不能重复,在网页里的这个id在一张网页里也不能重复。所以正常情况下,你的页面上只能有一个元素的idlogin-user。它对应的#login-user也只会被应用到页面上一处地方。

简单选择器

我们上面讲的这三种选择器,统称为简单选择器。

  • 类选择器
  • 标签选择器
  • ID选择器

三种选择器的异同

相同:

  • 都是对页面元素进行样式的选择和样式规则的应用
  • 都属于简单选择器

不同:

  • 类选择器和标签选择器,会对多个元素进行样式应用
  • ID选择器只影响页面上一个元素的样式,因为整个页面上所有的id名称不能重复。

如何选择正确的选择器

讲了三种选择器,那初学的同学可能会有这样的疑惑。三种选择器我应该怎么来进行选择呢?

我们需要根据不同的使用场景来选择:

  • 如果我们需要在页面上对同一种标签,应用统一的样式,那么我们可以使用标签选择器,当然如果你使用类选择器也可以,只是用类选择器,需要你的标签里添加一条条class属性。所以这种场景下究竟使用哪种你自己评估。

  • 如果我们要给不同类型的标签,比如<button><input><div>应用统一的样式,比如让这些元素看起来都像一个按钮的样式,那这时候,使用类选择器,是一种明智的选择。

  • 对于那些特定id的元素,如果需要一个特定的样式,这种情况下,使用ID选择器,定义一个id样式比较合适。

当然上面这些都没有绝对,还是那句话,在具体的业务场景中,选择使用你认为合理的的选择器,就可以。

课程小结

本节课,我们重点学习了三种简单选择器:

  • 标签选择器
  • 类选择器
  • ID选择器

并对这三种选择器的使用场景和三者的关系进行的横向的比较。

课后练习

利用今天学到的三种选择器的进一步理解,去改进之前的那些练习。

在选择使用哪种选择器的地方,自己多进行一些思考。

  • 优化你之前的博客文章页面的小练习,看看之前使用的样式选择器是否合理,对不合理的地方进行重构优化。
  • 对你之前的简历练习,进行样式的优化。
  • 对上节课的登录表单页面和调查问卷页面,优化其中的CSS样式部分。

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。