屬性開始於選擇器不工作

Question

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>

Answer 1

如果要切換的類圓形，似乎工作：

<div class="kooy-tomato kooy"> 

看來div[class^="kooy-"]是唯一能夠找到一流的，不找第二類似於<div>的元素，因爲^僅查看屬性中的第一項

這裏是一個fiddle

如果你嘗試如何過div[class*="kooy-"]的*看什麼都包含在attribure

這裏內是fiddle

如果你想知道更多一點關於CSS attribure selector

Answer 2

它不起作用，因爲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>