在线客服
扫描二维码
下载博学谷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选择器、组选择器、伪类选择器。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
python教程菜鸟教程学习路线
python教程菜鸟教程学习路线:需要学Python 环境搭建、Python 中文编码、Python 基础语法、Python 变量类型、Python 运算符、Python 条件语句、Python 循环语句、Python While 循环语句、Python for 循环语句、Python 循环嵌套、Python break 语句、Python continue 语句等内容。
8602
2019-06-26 10:15:05
零基础入门Python常见问题分享
零基础入门Python常见问题有哪些?作为经常混迹在各大Python技术论坛的小编而言,见到最多的话题就是:学习Python难不难?零基础可以学习Python吗?如何学习Python?等等。今天小编就以过来人的身份为大家分享一下这些常见的Python入门问题。
4996
2019-10-31 18:42:16
Python字符串常用技巧整理
相信在大家日常的文本处理工作中,都免不了要使用字符串。众所周知,使用Python处理字符串,十分的便捷和高效。本文整理了六大处理字符串的技巧,分别是字符串的切片和相乘,字符串中去掉一些字符,字符串的连接和合并,字符串的分割,字符串的开头和结尾的处理,字符串的查找和匹配。想要玩转Python字符串,就和我一起来看看吧!
5614
2019-12-02 16:44:31
Python lambda表达式学习总结
lambda表达式是⼀⾏函数,它们在其他语⾔中也被看做是没有具体名称的匿名函数。lambda表达式非常有用,它可以让代码更加简洁。如果你不想在程序中对⼀个函数使⽤两次,或许你会想⽤lambda表达式,它们和普通的函数完全⼀样。下面我们一起来看看lambda表达式的原型、代码案例、列表排序、列表并⾏排序以及lambda表达式的优劣吧!
5296
2020-06-30 12:03:41
变量作用域是什么?怎么用?
变量作用域是什么?怎么用?变量作用域即变量的可用性范围。变量作用域,变量的可用性范围;全局变量就是在函数外定义的变量,可以在不同函数内使用。
3735
2021-12-27 14:55:57