在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
CSS 选择器的种类有哪些?怎么用?CSS 选择器的种类有标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器,作为程序员应该具备根据不同的场景选择适合的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=“box”也可以设置样式,但是不推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。
7、组选择器
根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。
组选择器示例代码:

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

CSS 选择器总结:CSS 选择器就是用来选择标签设置样式的;常用的 CSS 选择器有六种分别是:标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
自学机器学习应该避免的三大误区与陷阱
作为人工智能的核心,机器学习成为炙手可热的概念。很多朋友都开始进入机器学习的大军之中,不知道大家在学习的过程中是否注意到“自学机器学习应该避免的三大误区与陷阱”呢?下面小编就和大家一起探讨一下。
9063
2019-08-07 18:11:22
新手学Python可行吗?需要什么基础?
新手学Python可行吗?其实Python可以说是最适合新手学习的编程语言。为什么这么说呢?难道学Python不需要什么基础吗?其实如果学习者有一定的计算机基础,学Python会更快,但是没基础也能学好Python,只要肯下功夫。大家了解了新手学Python的可行性之后,还要掌握零基础如何学习Python的方法,毕竟自信和决心只是学习的第一步。
7486
2019-08-19 13:38:17
Python容器有哪些?都有什么作用?
Python容器有哪些?都有什么作用?相信对Python容器有一定了解的朋友都应该知道,Python常用的容器一般有元祖、集合、字典、列表四种。而这些Python容器的作用概括起来,就是统一存储、管理一系列数据。本文将带大家一个个分析Python容器的具体内容,想要把Python容器知识点梳理一遍的朋友,可以一起来看看。
6348
2020-01-10 17:17:11
Python入门简单吗?怎么学Python?
Python在机器学习人工智能领域非常流行,可以说是算法工程师的标配编程语言。Python语言广泛应用在web开发、大数据开发、人工智能开发、机器学习、后端开发等领域之中,近几年Python语言的趋势不断上升发展前景好。
5631
2020-09-24 14:54:24
Python编程好不好学?入门难吗?
Python简单易懂的语法使得学习的难度大大降低了,Python是交互式语言,可以在一个Python提示符直接互动执行写你的程序。Python面向对象语言支持面向对象的风格或代码封装在对象的编程技术。Python是初学者的语言,对初级程序员而言是一种非常友好的编程语言。
6128
2021-05-31 11:17:00
热门文章
- 前端是什么
- 前端开发的工作职责
- 前端开发需要会什么?先掌握这三大核心关键技术
- 前端开发的工作方向有哪些?
- 简历加分-4步写出HR想要的简历
- 程序员如何突击面试?两大招带你拿下面试官
- 程序员面试技巧
- 架构师的厉害之处竟然是这……
- 架构师书籍推荐
- 懂了这些,才能成为架构师 查看更多
扫描二维码,了解更多信息
