Thuộc tính bắt đầu bằng bộ chọn không hoạt động

Question

div[class^="kooy-"] không hoạt động. Đồng thời div[class^="kooy"] cho kết quả như mong đợi.

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

Nếu bạn chuyển sang lớp học của bạn quanh nó dường như làm việc:

<div class="kooy-tomato kooy"> 

Dường như div[class^="kooy-"] chỉ có thể tìm thấy những lớp đầu tiên và không tìm kiếm một giây trên một phần tử như <div> vì ^ chỉ xem mục đầu tiên trong thuộc tính

Đây là một fiddle

Làm thế nào bao giờ hết nếu bạn cố gắng div[class*="kooy-"] Các * Trông vào những gì được chứa trong các attribure

Đây là một fiddle

Nếu bạn muốn tìm hiểu thêm một chút về CSS attribure selector

Answer 2

Nó không hoạt động vì class="kooy kooy-tomato" không bắt đầu bằng kooy- bắt đầu bằng kooy. Thay vào đó, bạn có thể sử dụng thuộc tính chứa công cụ chọn hoặc [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>