Question

在我看来有一个CSS类框，在选择器之前和之前有属性背景颜色。

我需要使用类似“box red”或“box green”的类，并更改选择器之前或之前的颜色。

以下代码段不包含我的完整CSS。我为选择器之前和之前隐藏了一些转换代码。

.box {
  display: inline-block;
  position: relative;
  clear: both;
  padding:14px 0 10px 27px;
  height: 20px;
  width: 15%;
  text-align:center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  vertical-align: top;
  line-height: 12px;
}

.box:before {
  top: 0;
  // some other line here
  border-top-left-radius: 3px;
}
.box:after {
  top: 50%;
  // some other line here
  border-bottom-left-radius: 3px;
}
.box:after, .box:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #434c51;
}

<div class="box red">Box 1</div>
<div class="box green">Box 2</div>

Answer 1

.box.green:before, .box.green:after {
  background: green;
}
.box.red:after, .box.red:before {
  background: red;
}

Answer 2

您可以通过将背景应用于.box.red:before或.box.red:after

来尝试此操作

＆＃13;

.box {
  display: inline-block;
  position: relative;
  clear: both;
  padding:14px 0 10px 27px;
  height: 20px;
  width: 15%;
  text-align:center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  vertical-align: top;
  line-height: 12px;
}

.box:before {
  top: 0;
  // some other line here
  border-top-left-radius: 3px;
}
.box:after {
  top: 50%;
  // some other line here
  border-bottom-left-radius: 3px;
}
.box:after, .box:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #434c51;
}
/*Added**/
.box.green:after ,.box.green:before {
    background: green;
}
.box.red:after,.box.red:before {
    background: red;
}

＆＃13;

<div class="box red">Box 1</div>
<div class="box green">Box 2</div>

＆＃13;

Answer 3

我没有得到这个问题，但根据我的理解，这似乎是一个非常基本的问题：

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.box {
  display: inline-block;
  position: relative;
  clear: both;
  padding:14px 0 10px 27px;
  height: 20px;
  width: 15%;
  text-align:center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  vertical-align: top;
  line-height: 12px;
}

.box:before {
  top: 0;
  // some other line here
  border-top-left-radius: 3px;
}
.box:after {
  top: 50%;
  // some other line here
  border-bottom-left-radius: 3px;
}
.box:after, .box:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #434c51;
}

.red:after , .red:before {
content: '';
 background-color: red;

}
.box.green:before, .box.green:after {
  background: green;
}
</style>
<body ng-app="">

Show HTML: <input type="checkbox" ng-model="myVar">

<div class="box red">Box 1</div>
<div class="box green">Box 2</div>

</body>
</html>

＆＃13;

Answer 4

你应该像这样使用.box.red：在{}或.box.green之后：{}之后你的片段应该是：

＆＃13;

.box {
  display: inline-block;
  position: relative;
  clear: both;
  padding:14px 0 10px 27px;
  height: 20px;
  width: 15%;
  text-align:center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  vertical-align: top;
  line-height: 12px;
}

.box:before {
  top: 0;
  // some other line here
  border-top-left-radius: 3px;
}
.box:after {
  top: 50%;
  // some other line here
  border-bottom-left-radius: 3px;
}
.box:after, .box:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #434c51;
}
.box.red:before,.box.red:after { background:red}
.box.green:before,.box.green:after { background:#5FBA7D}
<!--- or you can use after as you need -->

＆＃13;

<div class="box red">Box 1</div>
<div class="box green">Box 2</div>

＆＃13;

不同的配色方案：之后：选择器之前

4 个答案: