文章目录深度选择器没生效的原因和解决方案使用实例:后代选择子选择器相邻兄弟随后兄弟元素选择器属性选择器用户行为伪类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样式。