CSS Selector (A hoặc B) và Cv?

176

Điều này sẽ đơn giản, nhưng tôi gặp khó khăn khi tìm cụm từ tìm kiếm cho nó.
Hãy nói rằng tôi có điều này:

<div class="a c">Foo</div>
<div class="b c">Bar</div>

Trong CSS, làm cách nào tôi có thể tạo bộ chọn phù hợp với thứ phù hợp với "(.a hoặc .b) và .c"?

Tôi biết tôi có thể làm điều này:

.a.c,.b.c {
  /* CSS stuff */
}

Nhưng, giả sử tôi sẽ phải thực hiện loại logic này rất nhiều, với nhiều cách kết hợp logic, liệu có một cú pháp tốt hơn?

html css css-selectors

— Josh
nguồn

Hãy cẩn thận nếu bạn phải hỗ trợ Internet Explorer 6, vì nó sẽ bỏ qua nhiều tên lớp trong bộ chọn CSS.

— fforw

24

May mắn thay, đối với dự án này, tôi có thể nói với người dùng IE6 hãy tự nâng cấp.

— Josh

12

Để rõ ràng, tôi cố gắng luôn đặt một dòng mới sau dấu phẩy hoặc ít nhất là một khoảng trắng.

— ANeves

2

@ANeves +1 cho dòng mới. Đây là apporach tốt nhất theo ý kiến của tôi, đặc biệt là khi sử dụng kiểm soát nguồn.

— Curt

149

Có một cú pháp tốt hơn?

orToán tử CSS ' ( ,) không cho phép các nhóm. Về cơ bản, nó là toán tử logic ưu tiên thấp nhất trong các bộ chọn, vì vậy bạn phải sử dụng .a.c,.b.c.

— Bóng Matt
nguồn

25

Chưa, nhưng có :matches()hàm giả lớp thực nghiệm thực hiện điều đó:

:matches(.a .b) .c {
  /* stuff goes here */
}

Bạn có thể tìm thêm thông tin về nó ở đây và ở đây . Hiện tại, hầu hết các trình duyệt hỗ trợ phiên bản ban đầu của nó :any(), hoạt động theo cùng một cách, nhưng sẽ được thay thế bằng :matches(). Chúng ta chỉ cần chờ thêm một chút trước khi sử dụng nó ở mọi nơi (tôi chắc chắn sẽ).

— Bộ giải mã kim loại
nguồn

Thật vô lý khi đổ lỗi cho IE vì đã không thực hiện một cái gì đó mà đơn giản là họ không bao giờ nghĩ tới và không có trong bất kỳ dự thảo nào để bắt đầu. :-moz-any()và :-webkit-any()xuất hiện từ lâu trước khi Mozilla đề xuất nó cho Selector 4 (dẫn đến sự hiện thân của nó như hiện tại :matches()).

— BoltClock

1

Cũng không hợp lý khi hy vọng bất kỳ nhà cung cấp nào sẽ triển khai một tính năng từ một bản nháp không ổn định bất kể bản dự thảo đã được cung cấp bao lâu (điều này là do thực tế là Selector 4 vẫn không ổn định và phần lớn không được thực hiện trong hơn ba năm sau khi có FPWD) .

— BoltClock

@BoltClock, họ đã đổ lỗi cho IE6 trong cả một thập kỷ cho những thứ không tồn tại vào năm 2001. Mọi người chỉ muốn đổ lỗi cho ai đó.

— 17/8/2015

Một từ trên những người thử nghiệm là bạn không muốn bắt đầu dựa vào chúng trừ khi nó được thực hiện chính thức. Mặc dù nó có vẻ như là một giải pháp tuyệt vời - khả năng nó biến mất những gì cá nhân ngăn cản tôi thực hiện nó trong các dự án của mình. Ngay cả để theo dõi một lớp giả thử nghiệm cũng không khiến tôi cảm thấy an toàn. Nhiều khả năng nó sẽ được sử dụng ở nhiều nơi trong dự án và trong trường hợp và nếu bạn có nhiều hơn một nơi bạn sử dụng nó - bằng cách nào đó bạn cần theo dõi tất cả. Bạn chắc chắn có thể có dự phòng và vẫn kéo nó đi nhưng điều đó không có vẻ sạch sẽ

— Alexey Shevelyov

Tôi có phải là người duy nhất Uncaught DOMException: Failed to execute 'querySelector' on 'Document': ':any(.a .b)' is not a valid selector.gặp lỗi không? 🤔

— thomas

12

Nếu bạn có điều này:

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

Và bạn chỉ muốn chọn các yếu tố có .xvà ( .ahoặc .b), bạn có thể viết:

.x:not(.c) { ... }

nhưng điều đó chỉ thuận tiện khi bạn có ba "lớp con" và bạn muốn chọn hai trong số chúng.

Chỉ chọn một lớp con (ví dụ .a):.a.x

Chọn hai lớp con (ví dụ .avà .b):.x:not(.c)

Chọn cả ba lớp con: .x

— Vid thời gian
nguồn

6

Bất kỳ mệnh đề logic nào của biểu mẫu a or b or c or dđều giống như not(not(a) and not(b) and not(c) and not(d))vậy 'hoặc' thực sự chỉ là một hàm tiện lợi. Về lý thuyết, nó có thể có được mà không có nó trong mọi trường hợp. Trong trường hợp của OP (.a or .b) and .c->:not(:not(.a):not(.b)).c

— Max Murphy

2

@MaxMurphy Bạn đã thử nghiệm điều này?

— Vidime Vidas

4

Tính đến năm giờ sáng nay, vâng! Tôi có js phun ra logic thứ tự đầu tiên, với các bộ chọn ở các lá, cho kết quả như :not(:not([data-status="ACT"]):not([data-status="ISS"]):not([data-status="COR"]))[data-month="08"]. Mã này không đủ sạch cho sự nhìn nhận công khai, tuy nhiên, nếu không tôi sẽ đăng nó. Tôi đã thử nghiệm trên chrome, safari và một điện thoại Android cấp thấp.

— Max Murphy

2

@MaxMurphy Bạn có một điểm tuyệt vời, nhưng tôi nghĩ rằng bạn đã đưa ra một định nghĩa khá tra tấn về "chức năng tiện lợi". Bất cứ điều gì máy tính kỹ thuật số có thể làm đều có thể bị phân hủy thành cổng NAND, nhưng tôi sẽ không gọi phần còn lại của công nghệ phần mềm là "một loạt các chức năng tiện lợi". Sự khác biệt về mức độ nhanh chóng trở thành sự khác biệt thực tế của loại khi các cấu trúc có thể được kết hợp.

— Sarah G

1

@MaxMurphy Tôi đã có một thời gian khó khăn để nhận ra rằng bạn chỉ nói đùa. :( Lớp giả CSS CSS phủ định ,: not (X), là một ký hiệu chức năng lấy bộ chọn X đơn giản làm đối số. Nó khớp với một phần tử không được đại diện bởi đối số. X không được chứa bộ chọn phủ định khác . (Từ Tài liệu Mozilla , nhấn mạnh của tôi)

— törzsmókus

5

Không. CSS tiêu chuẩn không cung cấp loại thứ bạn đang tìm kiếm.

Tuy nhiên, bạn có thể muốn xem xét LESS và SASS .

Đây là hai dự án nhằm mở rộng cú pháp CSS mặc định bằng cách giới thiệu các tính năng bổ sung, bao gồm các biến, quy tắc lồng nhau và các cải tiến khác.

Chúng cho phép bạn viết mã CSS có cấu trúc hơn nhiều và một trong số chúng gần như chắc chắn sẽ giải quyết trường hợp sử dụng cụ thể của bạn.

Tất nhiên, không có trình duyệt nào hỗ trợ cú pháp mở rộng của chúng (đặc biệt là vì hai dự án đều có cú pháp và tính năng khác nhau), nhưng những gì chúng làm là cung cấp một "trình biên dịch" chuyển đổi mã LESS hoặc SASS của bạn thành CSS tiêu chuẩn, sau đó bạn có thể triển khai trên trang web của bạn.

— Spudley
nguồn

Vào thời điểm đó, tôi cũng có thể chỉ sử dụng in PHP "Kiểu nội dung: văn bản / css"

— Josh