以选择器开头的属性不起作用[重复]答案

【问题标题】：Attribute begin with selector not working [duplicate]以选择器开头的属性不起作用[重复]
【发布时间】：2016-12-07 20:30:25
【问题描述】：

div[class^="kooy-"] 不起作用。同时div[class^="kooy"]给出了预期的结果。

div {
  padding: 10px;
  border: 1px solid skyblue;
  margin-bottom: 10px;
}
div[class^="kooy-"] {
  background-color: tomato;
  color: white;
}

<div class="kooy kooy-tomato">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod a, nihil culpa rerum vero esse facilis sint voluptatem eius. Placeat, repudiandae, accusantium. Tempora, tempore ea pariatur molestias culpa quia id.</div>

<div class="kooy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, eius illum. Adipisci pariatur, harum soluta inventore nihil cupiditate dolores ab cum ullam fugit amet, quae provident fuga ea dolorem nobis.</div>

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

如果你切换你的课程，它似乎可以工作：

<div class="kooy-tomato kooy">

似乎div[class^="kooy-"] 只能找到第一个类，而不是在像<div> 这样的元素上寻找第二个类，因为^ 只查看属性中的第一项

这是fiddle

如果你尝试div[class*="kooy-"] * 看看属性中包含什么

这是fiddle

如果您想进一步了解CSS attribure selector

【讨论】：

【解决方案2】：

它不起作用，因为class="kooy kooy-tomato" 不是以kooy- 开头的，而是以kooy 开头的。您可以使用属性 contains 选择器或 [attr*=value] 代替。

div {
  padding: 10px;
  border: 1px solid skyblue;
  margin-bottom: 10px;
}
div[class*="kooy-"] {
  background-color: tomato;
  color: white;
}

<div class="kooy kooy-tomato">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod a, nihil culpa rerum vero esse facilis sint voluptatem eius. Placeat, repudiandae, accusantium. Tempora, tempore ea pariatur molestias culpa quia id.</div>

<div class="kooy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, eius illum. Adipisci pariatur, harum soluta inventore nihil cupiditate dolores ab cum ullam fugit amet, quae provident fuga ea dolorem nobis.</div>

【讨论】：

但我还是不明白为什么从不工作开始！
开始工作。但值不是以“kooy-”开头的。它以“kooy”开头。答案将选择器从匹配以 (^) 开头的值更改为包含 (*)。 w3.org/TR/css3-selectors/#selectors
正如迈克尔所说，如果您更改课程顺序，那么它将起作用jsfiddle.net/Lg0wyt9u/1084
您正在使用属性选择器，因此您需要将类视为属性，并且在您的情况下，它不是以 kooy- 开头的。