Question

div[class^="kooy-"]无效。同时div[class^="kooy"]按预期给出结果。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

它不起作用，因为class="kooy kooy-tomato"不以kooy-开头，而是kooy。您可以使用属性包含选择器或[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>

Answer 2

如果你转换你的课程似乎工作：

<div class="kooy-tomato kooy">

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

这是fiddle

如果您尝试div[class*="kooy-"] *查看attribure中包含的内容

这是fiddle

如果您想了解CSS attribure selector

的更多信息

属性从选择器不起作用开始

2 个答案: