将其中一个粉红色方块更改为另一种颜色

Question

这会将所有方块更改为粉红色。 https://jsfiddle.net/7cye4hfu/1/

如果我想将其中一个粉红色方块更改为另一种颜色，我该怎么做？

.channel-browser__channel-grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: pink;
}

.channel-browser__channel-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.channel-browser__channel-grid-item {
  position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item {
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image,
.horizontal-content-browser__content-item .responsive-image-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background-color: #1a1a1a;
  -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}

.box-color-red {
  background: red;
  border-radius: 4px;
}

.box-color-blue {
  background: blue;
}

.box-color-yellow {
  background: yellow;
}

.box-color-green {
  background: green;
}

<div class="channel-browser__channels channel-browser__channel-grid content-item-container content-item-container--aspect-square">
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-red"></div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-blue"></div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-yellow"></div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-green"></div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <img width="280" height="280" src="https://via.placeholder.com/465x465" class="responsive-image-component">
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <img width="280" height="280" src="https://via.placeholder.com/465x465" class="responsive-image-component">
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <img width="280" height="280" src="https://via.placeholder.com/465x465" class="responsive-image-component">
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <img width="280" height="280" src="https://via.placeholder.com/465x465" class="responsive-image-component">
  </div>
</div>

Answer 1

很多种方法。这是两个。

注意不要有内容：“”如果你想有内容

.channel-browser__channel-grid-item.box-color-red::after {
  background-color: red;
}
.channel-browser__channel-grid-item:nth-of-type(4)::after {
  background-color: green;
}

.channel-browser__channel-grid-item::after {
  position: absolute;
  inset: 0;
  background-color: pink;
}

.channel-browser__channel-grid-item.box-color-red::after {
  background-color: red;
}
.channel-browser__channel-grid-item:nth-of-type(4)::after {
  background-color: green;
}

.channel-browser__channel-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.channel-browser__channel-grid-item {
  position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item {
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image,
.horizontal-content-browser__content-item .responsive-image-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background-color: #1a1a1a;
  -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}

.box-color-red {
  background: red;
  border-radius: 4px;
}

.box-color-blue {
  background: blue;
}

.box-color-yellow {
  background: yellow;
}

.box-color-green {
  background: green;
}

<div class="channel-browser__channels channel-browser__channel-grid content-item-container content-item-container--aspect-square">
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-red"><button>Click</button></div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-blue"></div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-yellow"></div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-green"></div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <img width="280" height="280" src="https://via.placeholder.com/465x465" class="responsive-image-component">
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <img width="280" height="280" src="https://via.placeholder.com/465x465" class="responsive-image-component">
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <img width="280" height="280" src="https://via.placeholder.com/465x465" class="responsive-image-component">
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <img width="280" height="280" src="https://via.placeholder.com/465x465" class="responsive-image-component">
  </div>
</div>

Answer 2

代替 ：

.box-color-red {
    background: red;
    border-radius: 4px;
 }

 .box-color-blue {
     background: blue;
 }

 .box-color-yellow {
     background: yellow;
 }

 .box-color-green {
     background: green;
 }

尝试使用：

.box-color-red::after {
    background: red;
    border-radius: 4px;
 }

 .box-color-blue::after {
     background: blue;
 }

 .box-color-yellow::after {
     background: yellow;
 }

 .box-color-green::after {
     background: green;
 }