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

风格仅取决于头等舱？

1 个答案: