tra-loi-cau-hoi-phat-trien-web.com

ký tự đại diện * trong CSS cho các lớp

Tôi có các div mà tôi đang tạo kiểu với .tocolor, nhưng tôi cũng cần mã định danh duy nhất 1,2,3,4, v.v. vì vậy tôi thêm nó vào như một lớp khác tocolor-1.

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

Có cách nào để chỉ có 1 lớp tocolor-*. Tôi đã thử sử dụng ký tự đại diện * như trong css này, nhưng nó không hoạt động.

.tocolor-*{
  background: red;
}
603
twitter

Những gì bạn cần được gọi là bộ chọn thuộc tính. Một ví dụ, sử dụng cấu trúc html của bạn, như sau:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

Ở vị trí của div, bạn có thể thêm bất kỳ phần tử nào hoặc loại bỏ nó hoàn toàn và ở vị trí class bạn có thể thêm bất kỳ thuộc tính nào của phần tử đã chỉ định.

[class^="tocolor-"] - bắt đầu bằng "tocolor-".
[.__.] [class*=" tocolor-"] - chứa chuỗi con "tocolor-" xảy ra trực tiếp sau một ký tự khoảng trắng.

Bản trình diễn: http://jsfiddle.net/K3693/1/

Thông tin thêm về bộ chọn thuộc tính CSS, bạn có thể tìm thấy tại đâytại đây . Và từ Tài liệu MDN Tài liệu MDN

1119
Sotiris

Có bạn có thể này.

*[id^='term-']{
    [css here]
}

Điều này sẽ chọn tất cả các id bắt đầu bằng 'term-'.

Về lý do không làm điều này, tôi thấy nơi nào thích hợp hơn để chọn cách này; Đối với phong cách, tôi sẽ không làm điều đó một mình, nhưng nó có thể.

98
thomas.han

Một giải pháp thay thế:

div[class|='tocolor'] sẽ khớp với các giá trị của thuộc tính "class" bắt đầu bằng "tocolor-", bao gồm "tocolor-1", "tocolor-2", v.v.

Coi chừng việc này không khớp

Tham khảo: https://www.w3.org/TR/css3-selector/#attribution-interesentation

[att|=val]

Đại diện cho một phần tử với thuộc tính att, giá trị của nó là chính xác "val" hoặc bắt đầu bằng "val" ngay sau "-" (U + 002D)

25
adroitec

Nếu bạn không cần mã định danh duy nhất để tạo kiểu cho các div và đang sử dụng HTML5, bạn có thể thử và đi với Thuộc tính dữ liệu tùy chỉnh. Đọc trên tại đây hoặc thử tìm kiếm google cho HTML5 Custom Data Attributes

3
DKSan