html - 风格只取决于头等舱？

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