【问题标题】: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-"] 只能找到第一个类,而不是在像&lt;div&gt; 这样的元素上寻找第二个类,因为^ 只查看属性中的第一项

    这是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- 开头的。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-12-30
      • 1970-01-01
      • 1970-01-01
      • 2017-05-21
      • 2019-09-08
      • 2013-01-02
      • 1970-01-01
      相关资源
      最近更新 更多