Có bộ chọn CSS theo tiền tố lớp không?

175

Tôi muốn áp dụng quy tắc CSS cho bất kỳ phần tử nào có một trong các lớp khớp với tiền tố được chỉ định.

Ví dụ: tôi muốn một quy tắc sẽ áp dụng cho div có lớp bắt đầu bằng status-(A và C, nhưng không phải B trong đoạn trích sau):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

Một số loại kết hợp của:
div[class|=status]vàdiv[class~=status-]

Có thể thực hiện được theo CSS 2.1 không? Có thể thực hiện được dưới bất kỳ thông số CSS nào không?

Lưu ý: Tôi biết tôi có thể sử dụng jQuery để mô phỏng điều đó.

css css-selectors

— THX-1138
nguồn

373

Không thể thực hiện được với CSS2.1, nhưng có thể với các bộ chọn phù hợp với chuỗi con thuộc tính CSS3 ( được hỗ trợ trong IE7 +):

div[class^="status-"], div[class*=" status-"]

Lưu ý ký tự khoảng trắng trong bộ chọn thuộc tính thứ hai. Điều này chọn divcác phần tử có classthuộc tính đáp ứng một trong hai điều kiện sau:

[class^="status-"] - bắt đầu bằng "trạng thái-"
[class*=" status-"]- chứa chuỗi con "status-" xảy ra trực tiếp sau ký tự khoảng trắng. Tên lớp được phân tách bằng khoảng trắng theo thông số HTML , do đó, ký tự khoảng trắng đáng kể. Điều này kiểm tra bất kỳ lớp nào khác sau lớp đầu tiên nếu nhiều lớp được chỉ định và thêm phần thưởng kiểm tra lớp đầu tiên trong trường hợp giá trị thuộc tính được đệm không gian (có thể xảy ra với một số ứng dụng xuất ra classthuộc tính động).

Đương nhiên, điều này cũng hoạt động trong jQuery, như đã trình bày ở đây .

Lý do bạn cần kết hợp hai bộ chọn thuộc tính như được mô tả ở trên là vì bộ chọn thuộc tính như [class*="status-"]sẽ khớp với phần tử sau, có thể không mong muốn:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

Nếu bạn có thể đảm bảo rằng một kịch bản như vậy sẽ không bao giờ xảy ra, thì bạn có thể tự do sử dụng bộ chọn như vậy vì mục đích đơn giản. Tuy nhiên, sự kết hợp ở trên mạnh mẽ hơn nhiều.

Nếu bạn có quyền kiểm soát nguồn HTML hoặc ứng dụng tạo đánh dấu, có thể đơn giản hơn là chỉ tạo status-tiền tố statuslớp của chính nó thay vì như Gumbo gợi ý .

— BoltClock
nguồn

1

Nếu vì bất kỳ lý do lạ nào mà bạn có một lớp được gọi status-và bạn không muốn khớp với điều đó, thì bộ chọn càng trở nên phức tạp hơn: div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)Thêm vào đó bạn mất hỗ trợ IE7 / IE8. Rất may, nếu đánh dấu của bạn lành mạnh, bạn sẽ không cần loại trừ một lớp như vậy.

— BoltClock

Điều gì là sai với điều này : [class*=" anim-overlay-"] a:hover:after{...}. Các lớp CSS của tôi là anim-overlay-1, anim-overlay-2.....anim-overlay-8

— MB Parvez Rony

2

@WebDevRon: Bạn đã quên phần ^ =. Nếu thuộc tính lớp của bạn được đảm bảo bắt đầu với lớp phủ hoạt hình- thì có lẽ bạn không cần phần * =.

— BoltClock

Cảm ơn bạn. Một điều nữa, tôi có thể sử dụng cái này .anim-overlay-*{...}không?

— MB Parvez Rony

2

@Daniel Compton: Cảm ơn bạn đã chỉnh sửa. Tôi đã được nhận thức trong nhận thức về việc làm thế nào những từ như thế có thể hạ thấp xuống một người mà một cái gì đó có thể không quá rõ ràng. Tôi biết một số người thực sự không đánh giá cao loại thay đổi này, vì vậy tôi chủ yếu trả lời để cho bạn biết rằng tôi làm.

— BoltClock

14

Bộ chọn thuộc tính CSS sẽ cho phép bạn kiểm tra các thuộc tính cho một chuỗi. (trong trường hợp này - tên lớp)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribution_selector

(có vẻ như thực sự ở trạng thái 'đề xuất' cho 2.1 và 3)

Đây là một phác thảo về cách tôi * nghĩ rằng nó hoạt động:

[ ]: là nơi chứa các bộ chọn phức tạp nếu bạn sẽ ...
class: 'class' là thuộc tính bạn đang xem xét trong trường hợp này.
* : công cụ sửa đổi (nếu có): trong trường hợp này - "ký tự đại diện" cho biết bạn đang tìm kiếm BẤT K match trận đấu nào.
test- : giá trị (giả sử có một) thuộc tính - có chứa chuỗi "test-" (có thể là bất cứ thứ gì)

Ví dụ:

[class*='test-'] {
  color: red;
}

Bạn có thể cụ thể hơn nếu bạn có lý do chính đáng, với yếu tố quá

ul[class*='test-'] > li { ... }

Tôi đã cố gắng tìm các trường hợp cạnh, nhưng tôi thấy không cần phải sử dụng kết hợp ^và *- vì * có được mọi thứ ...

ví dụ: http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

Mọi thứ trên IE6 sẽ vui vẻ tuân theo. :)

lưu ý rằng:

[class] { ... }

Sẽ chọn bất cứ thứ gì với một lớp ...

— cảnh sát trưởng
nguồn

[class*='test-']sẽ phù hợp với các yếu tố như <div class='foo-test-bar'>. Đó là trường hợp một cạnh yêu cầu kết hợp ^ và * như được mô tả trong câu trả lời của tôi. Và IE6 không hỗ trợ bộ chọn thuộc tính.

— BoltClock

@BoltClock - cảm ơn đã làm rõ! - Tôi không hỗ trợ <EI9 - và tôi sẽ không bao giờ viết bất kỳ lớp nào sẽ bước lên nhau - vì vậy đối với tôi điều này hoạt động. :)

— sheriffderek

6

Điều này là không thể với các bộ chọn CSS. Nhưng bạn có thể sử dụng hai lớp thay vì một, ví dụ như trạng thái và quan trọng thay vì trạng thái quan trọng .

— cây mướp tây
nguồn

14

Ý tưởng tốt về tách nó vào lớp học riêng của mình, nhưng nó là có thể với bộ chọn CSS. Xem câu trả lời của tôi.

— BoltClock

2

Bạn không thể làm điều này không. Có một bộ chọn thuộc tính khớp chính xác hoặc một phần cho đến dấu - nhưng nó không hoạt động ở đây vì bạn có nhiều thuộc tính. Nếu tên lớp bạn đang tìm sẽ luôn là đầu tiên, bạn có thể làm điều này:

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

Lưu ý rằng đây chỉ là để chỉ ra bộ chọn thuộc tính CSS nào gần nhất, không nên giả sử tên lớp sẽ luôn ở phía trước vì javascript có thể thao tác thuộc tính.

— SBUJOLD
nguồn

2

Vâng, nghĩ về điều đó. Nó có thể trở thành một vấn đề khi jQuery xuất hiện, vì nó có thể chèn một lớp ở phía trước.

— THX-1138

Vâng, tôi sẽ chỉnh sửa bài viết của mình để làm cho nó rõ ràng không phải là một cách được đề xuất. Nếu bạn có quyền kiểm soát tên lớp thì đề xuất của Gumbo chắc chắn sẽ là hướng đi (cộng với bộ chọn thuộc tính trên các trình duyệt IE cũ hơn không được hỗ trợ).

— SBUJOLD