Trong CSS (bất kỳ phiên bản nào), có cách nào giống như, hoặc bất kỳ cách nào khác để làm bất cứ điều gì giống như bộ chọn :has() trong jQuery không?CSS có bất kỳ thứ gì giống như jQuery: has()?
jQuery(':has(selector)')Mô tả: Chọn các yếu tố mà chứa ít nhất một yếu tố mà phù hợp với selector cụ thể.
http://api.jquery.com/has-selector/
Không, không có. Cách CSS được thiết kế, không cho phép bộ chọn phù hợp với tổ tiên hoặc anh chị em trước; chỉ con cháu ( và >), anh chị em thành công (~ và +) hoặc trẻ em cụ thể (:*-child). Bộ chọn tổ tiên duy nhất là lớp giả :root chọn phần tử gốc của tài liệu (trong các trang HTML, tự nhiên nó sẽ là html).
Nếu bạn cần áp dụng kiểu cho phần tử bạn đang truy vấn với :has(), bạn cần phải thêm lớp CSS vào sau đó tạo kiểu theo lớp đó, as suggested by Stargazer712.
Bản nháp của Selectors 4 đề cập đến bộ chọn chủ đề, mặc dù nó có ngữ nghĩa khác với bộ chọn ': has()' của jQuery, sẽ hoạt động tốt trong trường hợp này nếu nó được chuẩn hóa và triển khai. – BoltClock
số Cách tốt nhất để thực hiện điều này là sử dụng jQuery:
Css File:
.myAwesomeClass {
...
}
Js File:
jQuery(':has(selector)').addClass("myAwesomeClass")
nơi selector là bất cứ điều gì nó là bạn ban đầu cố gắng để phù hợp.
Cách * tốt nhất * là tổ chức CSS và đánh dấu của bạn để làm cho nó không cần thiết phải dựa vào JavaScript, ngay cả khi CSS đôi khi hơi đau. –
bạn muốn yêu cầu điều gì trong bộ chọn có() -? – mightyplow
Đó không chỉ là một bộ chọn con bình thường? Các quy tắc trong bộ chọn sẽ được áp dụng cho tất cả các phần tử phù hợp. – andyb
@andyb: ': has()' là một lớp giả có điều kiện, tương tự như ': not()'. Các phần tử phù hợp là các bộ chọn xung quanh lớp giả, chứ không phải trong dấu ngoặc đơn. – BoltClock