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

668

Tôi có các div mà tôi đang tạo kiểu .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;
}

css css-selectors wildcard

— twitter
nguồn

1

Đây là trang web CSS3 chính thức về các công cụ chọn: w3.org/TR/css3-selector Và danh sách khả năng: findmitherip.com/litmus

— GarfieldKlon

1215

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 divbạ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í của classbạ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 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 ở đây và đây . Và từ Tài liệu MDN Tài liệu MDN

— Sotiris
nguồn

2

Thông tin mát mẻ. Chỉ cảnh báo là nếu hiệu suất là một vấn đề, hầu hết các bộ xử lý CSS sẽ từ chối các bộ chọn thuộc tính giống với regex (ví dụ: sử dụng '*') b / c của hiệu suất chậm. Ngoại trừ việc sử dụng bộ tiền xử lý (ví dụ Sass), có cách nào khác có thể thực hiện việc này không?

— CodeFinity

2

Có cách nào để kiểm tra xem thuộc tính class có chứa nhiều chuỗi con không? Có lẽ một cái gì đó như thế div[class*="foo"][class="bar"]nào?

— Connor

Không gian đó trong ví dụ "chứa" của chúng tôi là kẻ giết người đẹp. Từ những gì tôi có thể thấy, nó không nên ở đó, đúng không?

— Thomas

1

@Thomas Điều đó là bắt buộc để đảm bảo class="foo tocolor-red"trận đấu, nhưng khôngclass="foo fromtocolor-red-blue"

— aleclarson

Cám ơn vì cái này. Tôi đã sử dụng kỹ thuật này trong một vài năm, nhưng chưa bao giờ nhận ra rằng lớp ^ = chỉ áp dụng cho phần đầu của mục nhập lớp HTML. Tôi nghĩ rằng nó áp dụng cho tất cả các tên lớp được xác định cho thẻ HTML.

— BevansDesign

108

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 với '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ể.

— thomas.han
nguồn

Cảm ơn bạn cho IDphụ lục dựa trên này , không chỉ cho class.

— Khom Nazid

26

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 điều này không phù hợp

<div class="foo tocolor-">

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)

— adroitec
nguồn

12

Điều này sẽ không hoạt động nếu classthuộc tính bắt đầu với một số lớp khác không bắt đầu bằng tocolor.

— BoltClock

1

Điều này cũng hoạt động rất đẹp trong phong cách widget của Qt. Ví dụ: để áp dụng một kiểu cho tất cả các nhãn có tên foo*, bạn sẽ làmQLabel[objectName|='foo'] { ... }

— Phục hồi lại

Như @BoltClock đã nói, giải pháp này sẽ phá vỡ nếu phần tử có nhiều lớp và chúng không bắt đầu với lớp OP đang tìm kiếm.

— Dan Dascalescu

Mặc dù không hoạt động trong Chrome 78, * và ^ vẫn hoạt động.

— Gordon Mohrin

3

Nếu bạn không cần số nhận dạng duy nhất để tạo kiểu thêm 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 đây hoặc thử tìm kiếm googleHTML5 Custom Data Attributes

— DKSan
nguồn