Question

例如，我有一个左右三角形的橙色标签：

.tdLeft {
  border-right: 0.5em solid orange;
}

.tdMiddle {
  background-color: orange;
  font-size: 30px;
}

.tdRight {
  border-left: 0.5em solid orange;
}

.tdSide {
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
}

<table cellspacing="0" style="font-size: 50px">
  <tr>
    <td class="tdLeft tdSide"></td>
    <td class="tdMiddle">testing</td>
    <td class="tdRight tdSide"></td>
  </tr>
</table>

现在如果我想改变这个标签的颜色，我需要将tdLeft，tdMiddle和tdRight从“橙色”分别设置为其他颜色（例如：红色），无论如何要将背景颜色和边框分组将color属性放入同一个css中，以便“orange”只能在css文件中出现一次？

Answer 1

您可以使用 CSS variables 仅更改值一次：

＆＃13;

:root {
  --color: red; /* adjust */
}

.tdLeft {
  border-right: 0.5em solid var(--color);
}

.tdMiddle {
  background-color: var(--color);
  font-size: 30px;
}

.tdRight {
  border-left: 0.5em solid var(--color);
}

.tdSide {
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
}

＆＃13;

<table cellspacing="0" style="font-size: 50px">
  <tr>
    <td class="tdLeft tdSide"></td>
    <td class="tdMiddle">testing</td>
    <td class="tdRight tdSide"></td>
  </tr>
</table>

＆＃13;

对于support它的浏览器。

否则，如果应用于多个不同的属性，您将始终必须至少执行两次。

Answer 2

您只能使用一个元素和伪元素::before和::after来实现此目的我还使用CSS变量来表示颜色：

table {
  --color: orange;
  margin: 0 0.5em;
}

.myTD {
  position: relative;
  border: 0 solid transparent;
  border-width: 0.5em 0;
  background-color: var(--color);
  font-size: 30px;
}

.myTD::before,
.myTD::after {
  content: '';
  position: absolute;
  top: -0.5em;
  bottom: -0.5em;
  border: 1em solid transparent;
  border-color: transparent var(--color);
}

.myTD::before {
  left: -1em;
  border-left: 0;
}

.myTD::after {
  right: -1em;
  border-right: 0;
}

<table cellspacing="0" style="font-size:50px;">
  <tr>
    <td class="myTD">testing</td>
  </tr>
</table>

希望它有所帮助。

Answer 3

您可以使用css变量的嵌套，如下所示。这是@VXp建议的修改后的答案：

:root{
    --color: orange;
    --border: 0.5em solid var(--color);
    --transparent: transparent;
    --solid: 0.5em solid var(--transparent);
}

.tdLeft{
  border-right:var(--border);
}
.tdMiddle{
  background-color:var(--color);
  font-size:30px;
}
.tdRight{
  border-left:var(-border);
}
.tdSide{
  border-top:var(--border) var(--transparent);
  border-bottom:var(--solid);
}

如何将不同元素的背景颜色和边框颜色属性分组到同一个css类中？

3 个答案: