我想为我们公司创建某些标准的 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"]{}
所以我想知道，我们如何检查开始和结束类名的 and 不是整个字符串?
基本上我们可以有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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
