Nitelik, seçici çalışmıyor

Question

div[class^="kooy-"] çalışmıyor. Aynı zamanda div[class^="kooy"] sonucu beklendiği gibi verir.

<div class="kooy-tomato kooy"> 

O div[class^="kooy-"] birinci sınıf bulmanın tek edebilir gibi görünüyor ve bir saniye görünmüyor: Eğer sınıfları geçerseniz

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

iş gibi görünüyor yuvarlakgibi bir öğenin üzerindeki sınıf, olarak yalnızca

özniteliğindeki ilk öğeye bakar

Burada CSS attribure selector

hakkında biraz daha bilgi edinmek istiyorsanız attribure İşte

içinde bulunur ne fiddle

olan en div[class*="kooy-"]* görünüyor çalışırsanız nasıl hiç bir fiddle

olduğunu

Answer 2

class="kooy kooy-tomato", kooy- ile başlamadığı için çalışmıyor. kooy ile başlar. Nitelik özelliğini selektör veya [attr*=value] yerine kullanabilirsiniz.

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>