CSS选择器的使用-北京尧图网络

文章目录深度选择器没生效的原因和解决方案使用实例:后代选择子选择器相邻兄弟随后兄弟元素选择器属性选择器用户行为伪类URL定位伪类输入伪类树结构伪类逻辑组合伪类其他伪类选择器计算规则逐段拆解关键点对比原规则深度选择器深度选择器是让样式穿透使写在当前scpoed中的样式对子组件也会生效vue2.x/deep/::v-deep.a{}//这里写不写都行。vue3.x/deep/下面两种都可以vue:^3.0.0::v-deep(.a){}::v-deep.a{}.nav{height:10px;-item{font-size:10px;}}编译生成下面css nav{height:10px;}.nav.nav-item{font-size:10px;}-----------------------li{:hover{color:#FFFFFF;background-color:#ec808d;}}编译生成下面css:(li:hover{color:#FFFFFF;background-color:#ec808d;}:hover前面有个空格所以这里使用父选择器)如下 li{:hover{color:#FFFFFF;background-color:#ec808d;}没生效的原因和解决方案搞了很久后找到资料说是由于vue的组件版本太低导致的就是这俩货vue-loader:^11.3.4,vue-style-loader:^2.0.5,vue-loader 需要 11.2.0以后版本才支持vue-style-loader需要 2.2.0以后版本才支持大家应该知道vue-loader和vue-style-loader必须匹配吧vue-loader使用了12.0.0同时vue-style-loader3.0.0使用实例:vue2.x使用深度选择器.el-tabs{flex:auto;/deep/ .el-tabs__content{flex:auto;display:flex;flex-direction:column;.el-tab-pane{flex:auto;}}}.customStyle{.mint-field-other{::v-deep span[class^buts]{background-color:red!important;}}}.van-checkbox[aria-checkedfalse]{::v-deep .van-checkbox__label{color:#AAAAAA;}}::v-deep .third-dialog .el-dialog__body{display:none;}::v-deep .el-dialog{border-radius:8px;}::v-deep .el-button.el-button{margin-left:0;}“vue”: “^3.0.0” 版本使用深度选择器:deep(.fildidcode .van-cell:after){border-bottom:0!important;}.issueReply-content{font-size:16px;color:#AAAAAA;line-height:24px;height:80vh;::v-deep(p:nth-of-type(2)){height:0px;}::v-deep(p){font-size:16px;color:#AAAAAA;}}上面在element-ui中使用深度选择器时大都是使用到了根据上面的的分析使用是多余的。我的理解使用了会让sass、scss这类嵌套提高一个层级。。下面才是的正确使用姿势.el-menu{overflow-y:auto;overflow-x:hidden;border-right:0;::-webkit-scrollbar{background-color:#32323a;}::-webkit-scrollbar-track{background-color:#32323a;}//这里拿到了子元素然后再给拿到的子元素进行深度选择器。这样就避免选中了所有后代为.el-menu-item的元素相当于只给子元素做选择器穿透。 :deep(.el-menu-item){background-color:#32323a!important;height:$navHeight;line-height:$navHeight;font-size:14px;:hover{background-color:var(--el-color-primary)!important;} div{display:flex!important;align-items:center;justify-content:center;padding:0!important;}//这里展平后即使.el-menu.is-active,也就是级联选择器 .is-active{background-color:var(--el-color-primary)!important;}}}.el-sub-menu{:hover{background-color:var(--el-color-primary)!important;} :deep(.el-sub-menu__title){display:flex;align-items:center;justify-content:center;padding:0!important;//color:#fff!important;color:#fff!important;span{display:none;}:hover{ :deep(.el-sub-menu__title){background-color:var(--el-color-primary)!important;}i{color:#fff!important;}background-color:var(--el-color-primary)!important;}}.is-active{ :deep(.el-sub-menu__title){background-color:var(--el-color-primary)!important;}i{color:#fff!important;}}}后代选择子选择器相邻兄弟随后兄弟元素选择器标签选择器和*选择器属性选择器类id以及其他属性如…属性值直接选择器[attr][attr~“val”][attr“val”][attr|“val”]属性值正则选择器[attr^“val”][attr$“val”][attr*“val”]用户行为伪类手型进过伪类 :hover激活状态伪类 :active焦点伪类 :focus整体焦点伪类 :focus-within键盘焦点伪类 :focus-visiableURL定位伪类链接历史伪类 :link 和 :visited目标链接伪类 :target输入伪类输入控件状态可用状态与禁用状态 :enable和 :disable占位符显示伪类 :placeholder-shown默认选项伪类 :default输入值伪类选中选项伪类 :checked不确定值伪类 :indeterminate输入值验证有效性验证伪类 :valid和 :invalid范围验证伪类 :in-range 和 :out-of-range可选性伪类 :required 和 : optional用户交互伪类 :user-invalid 和空值伪类 :blank树结构伪类:root伪类:empty 伪类子索引伪类:first-child 和 :last-childonly-child:nth-child() 和 :nth-last-child()匹配类型的子索引伪类:first-of-type 和 :last-of-type:only-of-type:nth-of-type() 和 :nth-of-last-type()逻辑组合伪类否定伪类 :not()任意匹配伪类:is():is() 和 :matches 的区别了解任意匹配伪类 :where了解关联伪类 :has其他伪类与作用域相关的伪类参考元素伪类 :scope选择器计算规则CSS 优先级按(a, b, c)三元组计算a ID 选择器个数b 类选择器 / 属性选择器 / 伪类个数c 元素标签选择器 / 伪元素个数选择器中这类组合符本身不参与计算。逐段拆解.el-table__body tr.current-row td.el-table__cell:not(.el-table-fixed-column--right)片段类型贡献.el-table__body类选择器b 1tr元素选择器c 1.current-row类选择器b 1td元素选择器c 1.el-table__cell类选择器b 1:not(.el-table-fixed-column--right)伪类本身 0取括号内参数的分值 → 类选择器 b 1组合符不计分汇总a 0无 IDb 4c 2 →(0, 4, 2)关键点:not()伪类自身不计分它的分值等于括号内参数的分值。这里参数是.el-table-fixed-column--right一个类所以整体按 1 个类计算。如果参数是复合选择器如:not(td.foo)则取其中最高的一项类型类 → 该伪类贡献 (0,1,1)。对比原规则.el-table__body tr.current-row td.el-table__cell→ 3 类 2 元素 (0, 3, 2)所以新规则 (0,4,2) 原规则 (0,3,2)仍然稳定压过 Element Plus 自己那套 (0,3,2) 的current-row样式。

CSS选择器的使用

相关推荐

Harmony鸿蒙实战开发-个人记事本app「密码登录保护-简洁版」【源码在文末】

background-agents Managed Skills教程：5分钟创建可复用Agent指令集的完整指南

python毕业设计项目选题基于django的大数据技术的农产品电商平台设计与实现

更多资讯

磁电绝对值编码器MT6826SGT-STD-R：原理、编程与选型实战

光储充微网调度：LSTM预测与NSGA-III多目标优化实战

dlt 文档同步检查机制：确保 API 与行为变更始终伴随文档更新

OpenHarmony下GT911触摸屏坐标校准：原理与五点方案

Herdr 三种键盘模式入门指南：terminal / prefix / navigate 一次看懂

Velero（Heptio Ark 0.8.0）在 Google Cloud Platform 上的部署配置指南：GCS 存储桶、服务账号与云凭据全流程

今日更新

AWS无服务器应用开发指南：从Lambda到SAM的架构与实践

SpringBoot+Vue人事系统实战：解决HR数据断点与事务一致性

MATLAB手写紧束缚模型计算石墨烯能带结构

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

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

分布式服务的决策记录

创业产品的首版范围

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