Html 是否可以在CSS中使用通配符执行正则表达式以创建更少的代码？

我想使用正则表达式定义一组关于边界半径的复杂角点选项

我想要一种定义类角*的方法，而不需要在html或css中使用每个组合

例如：

这是我现在的css：

.corner-tl {
    border-top-left-radius:8px;
}

.corner-tr {
    border-top-right-radius:8px;
}

.corner-bl {
    border-bottom-left-radius:8px;
}

.corner-br {
    border-bottom-right-radius:8px;
}

但是，我希望能够应用以上所有、部分或全部，如下所示，只需使用以下代码即可创建一个只有左上角和右上角的框：

 <div class="corner-tl corner-tr">

对于*在“角”之前或之后但仅在“角”之后的每个角。这样，对于许多可能的组合，我只需要4个类

范例 我想在html中使用corner tl tr br来创建一个div，它的左上角、右上角和右下角都有一个半径。我还希望能够使用corner tr tl br创建相同的，但不必为每个变体编写类。如果我找不到解决方案，我将被迫使用内联样式，因为可能的组合很多。此外，我的数据库将存储这些值，这些值可以添加或不添加任何顺序的任何div在整个网站上。这将是很好的四行这样做，每一行可以合并成一个。这甚至可能是不可能的，但到目前为止的示例只显示单个类，而不是组合类

---

如果我能帮忙的话，我不想做很多样式，比如-corner、corner tl、corner tr、corner bl、corner br、corner tl tr、corner tr tl tl、corner tl bl、corner bl tl、corner tl br、corner br tl等等。。。理论上，角点本身是不需要的，因为它没有半径集，所以它在html中与不应用该类相同，但可能需要实现其他类，但在我的系统中，其余的都是可能的。我希望能够在一个类中应用任意组合，该类在css中有一个用于4个选项的表达式。

以

[class^="corner-"] {

}

[class$="corner-"] {

}

包含

[class*="corner-"] {

}

以

[class^="corner-"] {

}

[class$="corner-"] {

}

---

为什么不添加另一个类

corner

，用于所有角点的所有公共功能？我想我要找的是一个包含2个通配符的类，因此我可以同时使用corner tl、corner tl br或甚至corner br tl bl（如果我选择的话）。我想要的是在任何组合中设置ending，并将它们组合到类“corner”中。另外，请理解，我需要的是相对简化html，而不是css，所以我不需要为角点或单独的div设置样式的解决方案，我希望能找到一个给我4个类定义的解决方案，每个角一个，可以按任何顺序组合，以在html中实现64种可能性，如果需要所有角，则无需向div添加四个单独的类。角之间可能没有公共特性，除了名称空间的开头，因此我需要。这是@barmarYes。。。对于OP更精确的要求：

[class*=“-tl”]

和

[class*=”-tr”]

我的想法正确吗？那么，要在css中指定我的左上角，我需要两个答案的组合？例如[class^=“corner-”][class*=“-tl”]{border top-left radius:8px；}您的案例是一个非常基本的示例，但出于示例目的（这是一个非常垃圾的示例，但仍然）：该示例不满足我的需要，我需要一个允许任何组合的示例，但在同一部分，我在原来的问题上加了一个例子。我现在不太明白这个问题。你的例子仍然很基本，我不太理解你想要达到的最终结果。