アトリビュートがセレクタで始まらない

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>のような要素のクラスは、^は属性内の最初の項目のみを参照します

ここ

あなたがdiv[class*="kooy-"]をしようとした場合*はここattribure

内に含まれているもので、どのように見えるか、これまでfiddle

あなたはCSS attribure selector

について少し詳細をお知りになりたい場合 fiddle

されています

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>