较少的属性“选择器开始”带有不同的后缀

Question

我有一个针对两个HTML元素的属性选择器：

div {
  width: 40px;
  aspect-ratio: 1;
  margin: 5px;
  background-color: lavender;
}

div[class^="tag-"] {
  outline: 2px solid tomato;
}

<div class="tag-start"></div>
<div class="tag-end"></div>

我可以创建一个较小的选择器，该选择器既可以使用属性选择器作为起点？

Answer 1

根据 css 4级规范，您当前的选择器可能不是最佳解决方案。

在下图中，您的选择器将仅匹配示例一个和第二个，因为 a>您正在使用的只有属性值的开头，而不是每个空间分离的classList中的值：

div {
  width: 40px;
  aspect-ratio: 1;
  margin: 5px;
  background-color: lavender;
}

div[class^="tag-"] {
  outline: 2px solid tomato;
}

<div class="tag-start">1</div>
<div class="tag-end">2</div>
<div class="will-not-work tag-test">3</div>

由于所有较少的代码转录到CSS，较少的代码将无法匹配CSS本身所无法匹配的任何内容，但包括所有可能遵循tag的可能排列 - ...

我建议您使用<<< a href =“ https://developer.mozilla.org/en-us/docs/lealen/lealen/html/howto/use_data_attributes” rel =“ nofollow noreferrer”> data属性在这里而不是类。

div {
  width: 40px;
  aspect-ratio: 1;
  margin: 5px;
  background-color: lavender;
}

div[data-tag] {
  outline: 2px solid tomato;
}

div[data-tag="start"] {
  outline: 4px solid hotpink;
}

<div data-tag="start">1</div>
<div data-tag="end">2</div>
<div data-tag="test" class="will-work">3</div>