CSS 目标只是类名以字符串开头和结尾

Question

我想为我们的公司创建某些标准的 css 代码，作为品牌，我想以我的公司名称开始我所有的班级名称 - 并以 -Cls 结束

<div class="Nam-StdCss-Cls"></div>

<div class="Nam-StdCss-Raduis-Cls"></div>

<div class="Nam-StdCss-Border-Cls"></div>

我也想允许用户使用他们的自定义 css

 <div class="Nam-StdCss-Cls menu"></div>

<div class="menu Nam-StdCss-Cls"></div>

我试图这样做，这不允许进入像菜单这样的自定义类。

[class^="Nam-"][class*="StdCss-1"][class$="-Cls"]{}

我试过了，这不是检查开始和结束类名

 [class*="Nam-"][class*="StdCss-1"][class$=*-Cls"]{}

所以我想知道，我们如何只检查类名的开始和结束而不是整个字符串？

Answer 1

基本上我们可以有4种情况：

只有所需的课程：

<div class="Nam-StdCss-*-Cls"></div>

在开始时拥有所需的课程

<div class="Nam-StdCss-*-Cls ... more-class"></div>

最后拥有所需的课程

<div class="more-class ... Nam-StdCss-*-Cls"></div>

中间有需要的班级

<div class="more-class ... Nam-StdCss-*-Cls ... more-class"></div>

您可以为每个选择器编写一个选择器，如下所示：

<div class="Nam-StdCss-*-Cls"></div>

<div class="Nam-StdCss-*-Cls ... more-class"></div>

您应该注意，因为在某些特定情况下这可能针对不需要的元素，这是由于顺序对类无关紧要。

<div class="more-class ... Nam-StdCss-*-Cls"></div>

<div class="more-class ... Nam-StdCss-*-Cls ... more-class"></div>