Question

我正在尝试设置3个元素的背景色，但按数字进行地址处理对我来说几乎行不通。

.bar：nth-of-type（1）应该选择第一个 bar 元素，但是什么也没选择。 .bar：nth-of-type（2）但是选择第一个 bar 元素，而不是第二个。

：nth-of-type（）CSS伪类匹配给定类型的元素，根据他们在一组兄弟姐妹中的位置。

所以我有3个同级元素，但仍然不能选择第1个同级元素。

<div class="container">
    <div class="first">some content</div>
    <div class="second">some content</div>
    <div class="barChart">
      <div class="line"></div>
      <div class="bar" style="height:50%;"></div>
      <div class="bar" style="height:30%;"></div>
      <div class="bar" style="height:90%;"></div>
    </div>
  </div>

.container {
  border: 1px solid red;
  height: 5em;
  width: 50%;
  display: flex;
}

.first {
  background-color: lightGrey;
  flex-grow: 1;
  flex-basis: 30%;
}

.second {
  background-color: grey;
  flex-grow: 1;
    flex-basis: 30%;
}

.barChart {
  background-color: white;
  flex-grow: 2;
  flex-basis: 60%;
}

.barChart {
  background-color: white;
  flex-grow: 2;
   display: flex;
  align-items: flex-end;
   position: relative;
}

.bar {
    z-index: 10;
  flex: 1 0 auto;
  background-color:blue;
}

.line{
  z-index: 1;
 border-bottom: 1px solid gray;
 width: 100%;
 position: absolute;
  top: 10%;
}

.bar:nth-of-type(1){
  background-color: red;
}

以下stackoverflow问题未提供发生这种情况的答案：Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

CSS nth-of-type（1）不会选择第一个元素

0 个答案: