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>

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

[class^="Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:red;
}
/*note the space after the class name---------v*/
[class^="Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:blue;
}
/*       v---note the space before the class name*/
[class*=" Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:green;
}
/*       v------space before and after---------v */
[class*=" Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:purple;
}

<div class="Nam-StdCss-Cls">aaa</div>
<div class="Nam-StdCss-anything-Cls">aaa</div>
<div class="Nam-StdCss-Cls ... more-class">bbb</div>
<div class="Nam-StdCss-other-Cls more-class ...">bbb</div>
<div class="more-class ... Nam-StdCss-Cls">ccc</div>
<div class="more-class ... Nam-StdCss-radius-Cls">ccc</div>
<div class="more-class ... Nam-StdCss-Cls ... more-class">ddd</div>
<div class="more-class ... Nam-StdCss-radius-Cls ... more-class">ddd</div>
<br>
<div class="more-class  more-class">not !!</div>
<div class="more-class Nam-StdCss  more-class">not !!</div>
<div class="Nam-StdCss  more-class">not !!</div>

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

[class^="Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:red;
}
[class^="Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:blue;
}
[class*=" Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:green;
}
[class*=" Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:purple;
}

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

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

1 个答案: