• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 CSS 选择器的种类有哪些?怎么用?

发布时间:2021-12-09 10:42:18 浏览 2073 来源:博学谷 作者:小谷

    CSS 选择器的种类有哪些?怎么用?CSS 选择器的种类有标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器,作为程序员应该具备根据不同的场景选择适合的CSS选择器。

    CSS 选择器种类

    CSS 选择器学习目标:熟悉掌握CSS 选择器的种类。

    1、CSS 选择器是什么?

    CSS 选择器是用来选择标签的,选出来以后给标签加样式。

    2、CSS 选择器的种类有哪些?

    六种CSS 选择器:标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器

    3、标签选择器

    根据标签来选择标签,以标签开头此种选择器影响范围大一般用来做一些通用设置。

    标签选择器示例代码:

    标签选择器

    4、类选择器

    根据类名来选择标签,以 . 开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是CSS中应用最多的一种选择器。

    类选择器示例代码:

    类选择器

    5、层级选择器(后代选择器)

    根据层级关系选择后代标签,以选择器1 选择器2开头,主要应用在标签嵌套的结构中减少命名。

    层级选择器示例代码:

    层级选择器

    注意点: 这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器

    6、 id选择器

    根据id选择标签,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。

    id选择器示例代码:

    ID选择器

    注意点: 虽然给其它标签设置id=“box”也可以设置样式,但是不推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。

    7、组选择器

    根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。

    组选择器示例代码:

    组选择器

    8、伪类选择器

    用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

    伪类选择器示例代码:

    伪类选择器

    CSS 选择器总结:CSS 选择器就是用来选择标签设置样式的;常用的 CSS 选择器有六种分别是:标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器。

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: CSS显示特性display属性的使用介绍 下一篇: CSS 元素溢出是什么?怎么使用?

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码