Câu hỏi Có một bộ chọn CSS cha mẹ?


Làm cách nào để chọn <li> yếu tố đó là một phụ huynh trực tiếp của phần tử neo?

Ví dụ CSS của tôi sẽ giống như sau:

li < a.active {
    property: value;
}

Rõ ràng có nhiều cách để làm điều này với JavaScript nhưng tôi hy vọng rằng có một số loại workaround tồn tại có nguồn gốc CSS Level 2.

Trình đơn mà tôi đang cố gắng tạo kiểu đang được CMS tạo ra để tôi không thể di chuyển phần tử đang hoạt động đến <li> phần tử ... (trừ khi tôi tạo chủ đề cho mô-đun tạo menu mà tôi không muốn làm).

Ý tưởng nào?


2516
2018-06-18 19:59


gốc


Tôi đã không thực sự vay mượn từ các tài liệu jquery tôi chỉ cố gắng minh họa cho yếu tố mà tôi đang cố gắng chọn. Đề xuất của bạn sẽ chọn tất cả các con của một thẻ li (xem w3.org/TR/CSS2/selector.html) - jcuenod
Thảo luận thêm về vấn đề này tại stackoverflow.com/questions/45004/… - MatrixFrog
@Tomas li> a.active chọn con, chứ không phải cha mẹ. - Stewart
Điều thú vị cần lưu ý là câu hỏi @MatrixFrog liên kết đến trang này trong "Câu hỏi này đã có câu trả lời" ... - Agi Hammerthief
Có bất kỳ cập nhật nào cho câu hỏi này không? Tôi tin rằng sự tương ứng được ghi lại cuối cùng về câu hỏi là vào tháng 3 năm 2014. Có chuyện gì xảy ra với nó? - Master Yoda


Các câu trả lời:


Hiện tại không có cách nào để chọn phụ huynh của một phần tử trong CSS.

Nếu có một cách để làm điều đó, nó sẽ là một trong các thông số kỹ thuật của bộ chọn CSS hiện tại:

Trong thời gian chờ đợi, bạn sẽ phải sử dụng JavaScript nếu bạn cần chọn phần tử gốc.


Các Bộ chọn cấp 4 Bao gồm một :has() pseudo-class hoạt động giống như Triển khai jQuery. Kể từ năm 2018, điều này vẫn không được hỗ trợ bởi bất kỳ trình duyệt nào.

Sử dụng :has() câu hỏi ban đầu có thể được giải quyết với điều này:

li:has(> a.active) { /* styles to apply to the li tag */ }

2013
2018-06-18 20:16



Dường như nó đã được đề xuất và từ chối: stackoverflow.com/questions/45004/… - RobM
Có vẻ như bộ chọn chủ đề đã được xem xét lại, ngoại trừ bằng cách sử dụng ! hiện nay: The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector. - animuson♦
Phần mở rộng $ trông tốt hơn cho tôi ... được nối thêm ! có thể bị bỏ qua dễ dàng hơn. - Christoph
Xoay cốt truyện chính! Selectors 4 WD vừa được cập nhật hôm nay để loại trừ chỉ báo chủ đề khỏi cấu hình nhanh, được sử dụng bởi các triển khai CSS. Nếu thay đổi này vẫn còn, điều đó có nghĩa là bạn sẽ không thể sử dụng chỉ báo chủ đề trong bảng định kiểu nữa (trừ khi bạn sử dụng thêm một số loại chèn lấp như được mô tả trong câu trả lời khác) - bạn chỉ có thể sử dụng nó với API Selectors và bất kỳ nơi nào khác mà hồ sơ hoàn chỉnh có thể được triển khai. - BoltClock♦
Một cập nhật quan trọng khác: có vẻ như họ đang xem xét việc loại bỏ hoàn toàn cú pháp trình chọn đối tượng và thay thế bằng :has() giả tất cả mọi người đã đến để biết và yêu từ jQuery. ED mới nhất đã xóa tất cả các tham chiếu đến chỉ báo chủ đề và thay thế nó bằng :has() giả. Tôi không biết lý do chính xác, nhưng CSSWG đã tổ chức cuộc thăm dò ý kiến ​​một thời gian trước và kết quả phải có ảnh hưởng đến quyết định này. Nó rất có thể cho khả năng tương thích với jQuery (vì vậy nó có thể tận dụng qSA mà không có sửa đổi), và vì cú pháp chỉ báo chủ đề tỏ ra quá khó hiểu. - BoltClock♦


Tôi không nghĩ rằng bạn có thể chọn phụ huynh chỉ trong css.

Nhưng dường như bạn đã có .active lớp học, sẽ không dễ dàng hơn khi chuyển lớp đó sang li (thay cho a)? Bằng cách đó bạn có thể truy cập cả hai li và a chỉ qua css.


120
2018-06-18 20:08



Bạn không thể chuyển bộ chọn giả sang mục danh sách vì nó không phải là phần tử có thể lấy tiêu điểm. Anh ấy đang sử dụng bộ chọn hoạt động, vì vậy khi neo đang hoạt động, anh ta muốn mục danh sách bị ảnh hưởng. Các mục danh sách sẽ không bao giờ ở trạng thái hoạt động. Như một sang một bên, thật không may là một bộ chọn như vậy không tồn tại. Bắt một menu CSS thuần túy để có thể truy cập bàn phím hoàn toàn là không thể nếu không có nó (sử dụng bộ chọn anh chị em, bạn có thể tạo các menu phụ được tạo bằng cách sử dụng danh sách lồng nhau để xuất hiện, nhưng khi danh sách tăng tiêu điểm, nó sẽ bị ẩn lần nữa). Nếu có bất kỳ giải pháp CSS nào cho conun cụ thể này
@Dominic Aquilina Hãy xem câu hỏi, OP đang sử dụng một lớp, không phải là một bộ chọn giả. - jeroen


Bạn có thể sử dụng kịch bản.

*! > input[type=text] { background: #000; }

Điều này sẽ chọn bất kỳ phụ huynh nào của kiểu nhập văn bản. Nhưng chờ đợi, vẫn còn nhiều hơn nữa. Nếu bạn muốn, bạn có thể chọn một phụ huynh cụ thể:

.input-wrap! > input[type=text] { background: #000; }

hoặc chọn nó khi nó hoạt động:

.input-wrap! > input[type=text]:focus { background: #000; }

Kiểm tra HTML này:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

bạn có thể chọn span.help khi mà input đang hoạt động và hiển thị nó:

.input-wrap! .help > input[type=text]:focus { display: block; }

Có nhiều khả năng hơn; chỉ cần xem tài liệu của plugin.

BTW, nó hoạt động trong IE.


100
2017-08-13 10:13



giả sử sử dụng jquery patent() sẽ nhanh hơn. Điều này cần thử nghiệm, tuy nhiên - Dan
@Idered Nó không thành công khi bạn có khai báo CSS của một đối tượng Selector không có bộ chọn con (#a! một mình ném một lỗi, #a! p hoạt động) và vì vậy những người khác sẽ không hoạt động vì Uncaught TypeError: Cannot call method 'split' of undefined: xem jsfiddle.net/HerrSerker/VkVPs - HerrSerker
@ HerrSerker Tôi nghĩ rằng #a! là một bộ chọn không hợp lệ, nó sẽ chọn gì? - Idered
@ Tôi không biết. Các spec không nói nó là bất hợp pháp. #a! nên chọn chính nó. Ít nhất thì không nên có lỗi trong JavaScript - HerrSerker
Theo nhận xét của tôi về câu trả lời được chấp nhận, có vẻ như các polyfill có thể được yêu cầu ngay cả trong tương lai gần sau khi tất cả, bởi vì chỉ số chủ đề có thể không bao giờ được thực hiện bởi các trình duyệt trong CSS. - BoltClock♦


Như đã đề cập bởi một vài người khác, không có cách nào để tạo kiểu cho cha / mẹ của một phần tử bằng cách sử dụng CSS, nhưng sau đây sẽ làm việc với jQuery:

$("a.active").parents('li').css("property", "value");

75
2017-12-14 14:51



Các < bộ chọn không tồn tại (được xác minh bằng cách sử dụng jQuery 1.7.1). - Rob W
Có lẽ đó <-syntax đã làm việc trong năm 2009 nhưng tôi đã cập nhật nó (cho năm 2013). - Alastair
Thậm chí tốt hơn, sử dụng jQuery được tích hợp sẵn :has() bộ chọn: $("li:has(a.active)").css("property", "value");. Nó đọc tương tự như đề xuất của CSS 4 ! bộ chọn. Xem thêm: :parent bộ chọn, .parents() phương pháp, .parent() phương pháp. - Rory O'Kane
Và thay vì sử dụng .css("property", "value") để tạo kiểu cho các phần tử đã chọn, bạn nên thường .addClass("someClass") và có trong CSS của bạn .someClass { property: value } (thông qua). Bằng cách đó, bạn có thể ghi chú phong cách với toàn bộ sức mạnh của CSS và bất kỳ bộ tiền xử lý nào bạn đang sử dụng. - Rory O'Kane


Không có bộ chọn gốc; chỉ là cách không có bộ chọn anh chị em trước đây. Một lý do chính đáng để không có các bộ chọn này là vì trình duyệt phải duyệt qua tất cả các phần tử con của một phần tử để xác định có nên áp dụng một lớp hay không. Ví dụ: nếu bạn đã viết:

body:contains-selector(a.active) { background: red; }

Sau đó, trình duyệt sẽ phải đợi cho đến khi nó được tải và phân tích mọi thứ cho đến khi </body> để xác định xem trang có phải là màu đỏ hay không.

bài viết này Tại sao chúng tôi không có bộ chọn gốc giải thích chi tiết.


44
2018-01-21 08:43



để làm cho trình duyệt nhanh hơn. internet chính nó nhanh hơn. bộ chọn này chắc chắn là cần thiết, và lý do không thực hiện nó là, thật đáng buồn, bởi vì chúng ta sống trong một thế giới thô sơ, chậm chạp. - vsync
trên thực tế, bộ chọn sẽ làm cho trình duyệt có tốc độ rất chậm. - Salman A
Tôi tin tưởng rằng các nhà phát triển trình duyệt sẽ đưa ra một thực hiện đó là (ít nhất) nhanh như phiên bản javascript, đó là một trong những người kết thúc bằng cách sử dụng anyway. - Marc.2377


không có cách nào để làm điều này trong css2. bạn có thể thêm lớp vào li và tham chiếu

li.active > a {
    property: value;
}

39
2018-06-18 20:06



bằng cách hiển thị phần tử: chặn bạn có thể tạo kiểu cho phù hợp với toàn bộ vùng li. nếu bạn có thể giải thích những gì phong cách bạn đang tìm kiếm có lẽ tôi có thể giúp đỡ với một giải pháp. - Josh
đây thực sự là một giải pháp đơn giản và thanh lịch, và trong nhiều trường hợp, nó có ý nghĩa để thiết lập lớp trên phụ huynh. - Ricardo


Bộ chọn CSS “Tổng hợp Sibling Combinator”Có thể được sử dụng cho những gì bạn muốn:

E ~ F {
    property: value;
}

Điều này khớp với bất kỳ F phần tử được bắt đầu bởi một E thành phần.


26
2018-06-30 14:00



Đó không phải là câu trả lời đúng, nhưng cảm ơn vì đã nhắc chúng tôi về bộ chọn này - Dan
Đây chỉ là anh chị em ruột, không phải là con, cha mẹ ... không thực sự trả lời câu hỏi - Alireza


Cố gắng chuyển đổi a đến block hiển thị và sau đó sử dụng bất kỳ kiểu nào bạn muốn. aphần tử sẽ lấp đầy li và bạn sẽ có thể sửa đổi giao diện của nó theo ý muốn. Đừng quên đặt li padding đến 0.

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

24
2017-11-23 09:03