主页 / 问题 / 654144
Accepted
Semyon Zadorozhniy
Asked:2020-04-16 00:30:28 +0000 UTC2020-04-16 00:30:28 +0000 UTC

对于具有特定类名的 :last-child 元素，通过 ::before 将属性添加到块子元素的正确方法是什么？

  • 772

如何通过具有特定类名的元素::before正确地将属性添加到块子元素？:last-child

此处的代码示例：

<div class="cv-viewer">
  <div class="v-panel v-has-height"></div>
  <div class="v-panel v-has-height"></div>
  <div class="v-panel hidden"></div>
  <div class="v-panel hidden"></div>
</div>

.cv-viewer {
.v-panel {
    width: 300px;
    height: 200px;
    background-color: #000;
    margin-bottom: 4px;
    position: relative;
}
.hidden{
    display: none;
}
& > .v-panel.v-has-height {
    &::before {
        content: '';
        position: absolute;
        left: 49px;
        top: -32px;
        width: 2px;
        height: 100%;
        background-color: #AD8CED;
        z-index: 0;
    }
}
& > .v-panel.v-has-height :last-child {
    &::before {
        content: '';
        position: absolute;
        left: 49px;
        top: -32px;
        width: 2px;
        height: 58px;
        background-color: #AD8CED;
        z-index: 0;
    }
  }
}

由于标记是动态的，子元素的数量会发生变化，因此具有伪元素类的最后一个元素v-has-height必须具有::before有限的高度。

css

1 个回答

  1. Best Answer

    你需要的东西不能用纯 CSS 实现。:last-child指的是父元素的最后一个元素，:last-of-type指的是某种类型的最后一个元素，或者换句话说，一个标签。因此，要么您需要对元素进行包装<div class="v-panel v-has-height"></div>，然后您可以使用 访问最后一个元素:last-child，要么您需要 JS：

    let blocks = Array.from(document.querySelectorAll('.v-has-height'));

blocks[blocks.length - 1].classList.add('v-has-height--last');
    .v-panel {
  height: 50px;
  border: 1px solid;
  margin-bottom: 5px;
  padding-left: 40px;
  position: relative;
}

.v-panel:before  {
  position: absolute;
  content: '';
  width: 15px;
  height: 15px;
  left: 0;
  background-color: black;
}

.v-has-height:before {
  background-color: yellow;
}

.v-has-height.v-has-height--last:before {
  background-color: red;
}
    <div class="cv-viewer">
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет красный квадрат</div>
  <div class="v-panel hidden">Тут будет черный квадрат</div>
  <div class="v-panel hidden">Тут будет черный квадрат</div>
</div>

    • 1

相关问题