>>> 是vue的深度选择器
Vue style 深度作用选择器 >>> 与 /deep/(sass/less)
/deep/ .el-table { // 也是深度选择器 不用写父元素 直接了当 推荐使用
background-color: transparent;
}
tip:无任何依赖时,纯css写>>>是无效果哒,需要在vue中才会生效,/deep/ 也是一样
.dateRange >>> ::-webkit-input-placeholder {
color: #26f2ff !important;
}
.dateRange >>> ::-moz-input-placeholder {
color: #26f2ff !important;
}
.dateRange >>> ::-ms-input-placeholder {
color: #26f2ff !important;
}
1.nth-child(1) 选择父元素的中第1个子元素
.item span:nth-child(1) 选择item父元素的中第1个是span的子元素
item span:nth-child(-1n+3) 选择item父元素的中前三个是span的子元素,若第一个元素不是span 则不会被选中
<style>
/*选择第1个item */
.item:nth-child(1) {
color: red;
}
.item:nth-child(2) {
color: blue;
}
/* 选择页面所有item下面 第2个span */
.item span:nth-child(2) {
color: pink;
}
</style>
<div class="item">
<span>第一个</span>
<span>第二个</span>
</div>
<div class="item">
<span>第三个</span>
<span>第四个</span>
</div>
效果图:
li:nth-child(odd);li:nth-child(2n+1) 表示选中奇数
li:nth-child(even);li:nth-child(2n) 或者li:nth-child(2n+2) 表示选中偶数
1.nth-of-type(1) 选择父元素的中同类型的元素
.item span:nth-of-type(1) 选择item父元素的中同为span的子元素,选择第一个span元素
2.first-child 、last-child
<style>
/*选择item下面第1个span */
.item span:first-child {
color: red;
}
/*选择item下面最后1个span */
.item span:last-child {
color: blue;
}
</style>
<div class="item">
<span>第一个</span>
<span>第二个</span>
<span>第三个</span>
</div>
3 .first-of-type、last-of-type(匹配同类型中的最后一个同级兄弟元素)
<style>
/* 匹配同类型中的第一个同级兄弟元素 */
.item:first-of-type {
color: red;
}
/* 匹配item下面的第一个同级兄弟元素span */
.item span:first-of-type {
color: blue;
}
</style>
<div class="item">
<span>第一个</span>
<span>第二个</span>
<span>第三个</span>
</div>
效果图:
后续持续更新