2012-01-02 52 views
5

Sản phẩm sauChaining điều hành anh chị em liền kề trong CSS

.a + .b + .c 

một chọn hợp lệ cho một phần tử của lớp c trực tiếp sau hai yếu tố của lớp ab tương ứng? Dường như nó hoạt động trong Chrome 16. Nó có rõ ràng từ tiêu chuẩn không, nó có hoạt động không?

+1

Vâng. FF + Chrome + Safari + Opera + IE9 – noob

+1

Tại sao bạn cho rằng nó không tiêu chuẩn để sử dụng nhiều bộ kết hợp? Chúng tôi kết hợp các bộ phối hợp (ha!) Mỗi ​​ngày: 'nav> ul> li a' và bộ kết hợp anh chị em liền kề là bộ chọn CSS2 đã được chuẩn hóa trong một thời gian tốt, cùng với bộ kết hợp con và hậu duệ. – BoltClock

+1

@micha: Cũng có thể đưa ra số phiên bản từ IE, bây giờ IE6 hầu như không còn quan trọng nữa. – BoltClock

Trả lời

5

Làm việc tốt cho tôi và là tiêu chuẩn, theo như tôi biết. (Chưa bao giờ thấy bất cứ điều gì ngược lại)

Ví dụ: http://jsfiddle.net/6ykxB/

Nếu nó đã được chỉ sử dụng bộ chọn liền kề trước, điều này sẽ vẫn làm việc

.z + .b + .c

nhưng nó không

Ví dụ2: http://jsfiddle.net/6ykxB/1/

Tham chiếu trên SitePoint đề cập đến m ultiple selectors anh chị em liền kề, xác nhận thêm rằng họ là tiêu chuẩn:

http://reference.sitepoint.com/css/adjacentsiblingselector

Tuy nhiên, có một cảnh báo cho các yếu tố với :hover và nhiều selectors:

Safari (lên đến và bao gồm cả phiên bản 4) và Chrome (tối đa và bao gồm phiên bản 3) hoạt động “lỗi” khi bộ chọn liền kề đứng trước một phần tử bằng cách sử dụng lớp giả giả. Lỗi khác nhau giữa các phiên bản nhưng quy tắc không được áp dụng hoặc áp dụng không nhất quán.

+2

WebKit vẫn gặp sự cố với bộ phối hợp anh chị em bên cạnh và chung khi được sử dụng với ': hover' ngay cả trong các phiên bản mới nhất, vì vậy chúng tôi vẫn phải cẩn thận. Tuy nhiên, điều này không liên quan gì tới việc sử dụng nhiều bộ phối hợp: ': hover' là một lớp giả, không phải là bộ kết hợp. Nó có các vấn đề trong WebKit thậm chí chỉ với một '+' hoặc '~'. – BoltClock

Các vấn đề liên quan