风格仅取决于头等舱？

Question

我有一个问题,我需要根据他们的第一堂课(仅)设计我的元素.我的标题是自动生成的,上面有许多标签(取决于类别)但是我想使用第一个类别标签来设置我的元素的样式.这是一个例子:

<div class="tag-text tag-design tag-architecture">TITLE HERE</div>

...和一个CSS代码:

.tag-architecture {
  background-color: purple;
}
.tag-text {
  background-color: black;
}
.tag-design {
  background-color: green;
}

你可以猜到,如果html元素同时有3个标签,那么它的样式取决于CSS的最后部分,在这种情况下.tag-design.

是否可以设置仅依赖于第一类(在本例中.tag-text)的元素的样式- 以便在这种特定情况下背景保持黑色？

Answer 1

您可以尝试使用CSS3子串匹配属性选择器

[class^="tag-architecture"] {
  background-color: purple;
}

[class^="tag-text"] {
  background-color: black;
}

[class^="tag-design"] {
  background-color: green;
}

CSS3子串匹配属性选择器如下:

[att^=val] – the "begins with" selector
[att$=val] – the "ends with" selector
[att*=val] – the "contains" selector