Question

我对CSS一点都不满意，因此在以下问题上需要您的帮助。我有以下结构：

<div class="RowClass">
    <div class="CellClass1" > Test1 </div>
    <div class="CellClass2" data-value= "Summer" > </div>
    <div class="CellClass2" data-value= "Winter" > </div>
    <div class="CellClass2" data-value= "Monsoon" > </div>
</div>

以上结构的目的是有一行，并且在同一行内有不同的单元格。具有“ CellClass2”类的单元格具有数据值属性，因为我们要根据单元格中的值更改单元格的背景颜色（而不仅仅是内部文本）。为此，我们使用了以下内容：

.CellClass2::after{
  content: attr(data-value);
}
.CellClass2[data-value="Summer"]:after {
  color: white;
  background : Yellow;
}

上面的代码可以正常工作。它将颜色更改为白色，将背景更改为蓝色。唯一的问题是我们希望整个单元格都是蓝色的。只是将文本背景更改为黄色。

请帮助解决以上情况。

编辑：为rowclass和cellclass2添加CSS：

.CellClass2{ 
  display:  table-cell ;
  text-align :  center ;
  border:  solid ;
   border-color :  gray ;
  text-align :  center ;
  color:black;
  height :  30px ;
  padding-top :  10px ;   
  padding-bottom: 10px;
  padding-right: 7px;  
  padding-left: 7px;
  border-width: thin;    
  font-size: 12px;
  font-weight: 600;
}

.RowClass{
display :   table-row ;
background:  #eee ;
padding:  20px ;
margin:  20px ;
font-weight : bold ;
table-layout: fixed;
width: 200%;
}

谢谢。

Answer 1

删除:after部分中的.CellClass2[data-value="Summer"]

.CellClass2::after{
  content: attr(data-value);
}
.CellClass2[data-value="Summer"] {
  color: white;
  background : Yellow;
}
.CellClass2{ 
  display:  table-cell ;
  text-align :  center ;
  border:  solid ;
   border-color :  gray ;
  text-align :  center ;
  color:black;
  height :  30px ;
  padding-top :  10px ;   
  padding-bottom: 10px;
  padding-right: 7px;  
  padding-left: 7px;
  border-width: thin;    
  font-size: 12px;
  font-weight: 600;
}

.RowClass{
display :   table-row ;
background:  #eee ;
padding:  20px ;
margin:  20px ;
font-weight : bold ;
table-layout: fixed;
width: 200%;
}

<div class="RowClass">
    <div class="CellClass1" > Test1 </div>
    <div class="CellClass2" data-value= "Summer" > </div>
    <div class="CellClass2" data-value= "Winter" > </div>
    <div class="CellClass2" data-value= "Monsoon" > </div>
</div>

更改整个div的背景颜色

1 个答案: