深度选择器
深度选择器是让样式穿透使写在当前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-checked="false"] {
&::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-visiable
URL定位伪类
- 链接历史伪类 :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-child
- only-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