HTML5 选择器

>>>  是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>

效果图：

后续持续更新