选择器分类和权重计算，less 中的解释-北京尧图网络

一、选择器分类css中选择器有简单选择器和复杂选择器1、简单选择器通配符选择器*匹配任何元素标签选择器标签指用HTML标签名称作为选择器类选择器class使用.(英文点号)进行标识后面紧跟类名。id选择器使用#进行标识后面紧跟id名2、复杂选择器1.属性选择器2.组合选择器选择器含义并集选择器A,B两个选择器之间逗号隔开的逗号可以理解为和的意思后代选择器A B把外层标签写在前面内层标签写在后面中间用「空格」分隔先写父亲再写儿子孙子。子元素选择器AB只能选择作为某元素子元素(亲儿子)的元素把父级标签写在前面子级标签写在后面中间跟一个进行连接A B选中匹配 B 且为匹配 A 的元素的下一相邻元素A ~ B选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素交集选择器AB两个选择器之间不能有空格交集选择器与后代选择器的区别从格式上来看后代选择器两个选择器之间要有空格交集选择器两个选择器之间没有空格从内容上来看后代选择器后面一个标签/类选择器一定是前一个的后代也就是说嵌套交集选择器后面一个标签只是对前面的标签选择器进行横向的再次筛选交集选择器style div.b { background-color: aqua; } /style body div classb p我是一个屁/p span我是span/span span我是span/span span我是span/span /div /body3.伪类选择器选择器含义a:link匹配所有未被点击的链接a:visited匹配所有已被点击的链接a:hover匹配鼠标悬停其上的a元素a:active匹配鼠标已经其上按下、还没有释放的a元素E:first-child匹配父元素的第一个子元素EE:last-child匹配父元素的最后一个子元素EE:nth-child(n)匹配父元素的第n个子元素Eodd奇数even偶数nth-child与nth-of-type区别1. nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配若不匹配则不使用2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E . 然后再根据E找第n个孩子五、伪元素选择器选择器含义E::before在E元素内创建一个子元素插入生成的内容作为伪元素放在最前面E::after在E元素内创建一个子元素插入生成的内容作为伪元素放在最后面二、CSS三大特性「1. CSS 层叠性」「2. CSS 继承性」「3. CSS 优先级(CSS特殊性)」权重计算公式标签选择器计算权重公式继承或者 *0,0,0,0标签选择器0,0,0,1每个类伪类0,0,1,0每个ID0,1,0,0每个行内样式 style1,0,0,0每个!important 最重要的 div { color: pink !important; }∞ 无穷大权重叠加div ul li ------ 0,0,0,3 .nav ul li ------ 0,0,1,2 a:hover -----— 0,0,1,1 .nav a ------ 0,0,1,1三、less 中的解释参考less 的详解_hsany330的博客-CSDN博客_less中的什么意思作用介绍内层选择器前面的符号就表示对父选择器的引用。在一个内层选择器的前面如果没有符号则它被解析为父选择器的后代如果有符号它就被解析为父元素自身或父元素的伪类。同时用在选择器中的还可以反转嵌套的顺序并且可以应用到多个类名上1.当前选择器的伪类或者伪元素。如 :hover :focus :after :before等.demo { :after { content: .; display: block; background-color: aquamarine; } } /*被解释为*/ .demo:after { content: .; display: block; background-color: aquamarine; }2.作为内层选择器表示对父选择器的引用。交集选择器.demo { -title { text-align: center; } } /*被解释为*/ .demo-title { text-align: center; }3、后代选择器.demo { .demo-title { text-align: center; } } 被解释为 .demo .demo-title { text-align: center; }4、反转嵌套的顺序并且可以应用到多个类名上.demo-title { .demo { font-size: 20px; } } 被解释为 .demo .demo-title { font-size: 20px; }

选择器分类和权重计算，less 中的解释

相关推荐

汽车玻璃原片衬纸定制规格，可裁切最大尺寸

回溯题目：删除无效的括号

别再只看参数量了！真正决定AI输出质量的3个隐藏变量（含可复现的量化评估Python脚本）

更多资讯

腾讯把 Agent 记忆系统开源了，TencentDB Agent Memory 实测！

DataGridViewComboBox 输入自动匹配：从原理到实战的完整指南

CNN煤矸石自动分选实战：从图像识别到部署避坑指南

ESP32多应用共存：NVS命名空间隔离实战指南

Windows本地部署ecology9：组件配置与启动排错指南

Module Builder——Gem200之Command模块

今日更新

开源模型端侧落地实战：量化、推理加速与Agent上下文管理

AI Evals实战指南：从零搭建LLM应用评估体系与CI/CD集成

Java采购管理系统实战：从数据库设计到事务一致性

本周精选

如何彻底离线使用 Laya-CoreML：Hugging Face 下载、缓存机制与 local_files_only 详解

基于1Panel 部署MySQL MCP 服务：TaoToken 统一 Key 接入与 config.toml 配置实战

崇州园区营销网站建设避坑指南：5大注意事项保备案安全

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？