: không() bộ chọn không hoạt động giống nhau giữa Safari và Chrome/Firefox

Question

Tôi đang gặp khó khăn trong việc tìm ra lý do tại sao mã sau hiển thị màu xanh lam trong Safari nhưng có màu đỏ trong Chrome và Firefox.

em:not(div) { 
 
    color: red 
 
} 
 
em:not(p div) { 
 
    color: blue 
 
}

<p> 
 
    <em>FOO</em> 
 
</p>

https://jsfiddle.net/hzcLpf9L/

Rõ ràng nó trông giống như Chrome và Firefox không hỗ trợ :not() selectors CSS với nhiều cấp độ trong đó. (Lỗi có thể?)

Tôi rất thích :not() bộ chọn và tôi phát triển với Safari, vì vậy khi tôi phát hiện ra trang web của mình trên Chrome, tôi gần như bị đau tim. Bất kỳ giải thích về lý do tại sao hành vi kỳ lạ này xảy ra sẽ được đánh giá cao.

Answer 1

Safari gần đây đã xuất xưởng level 4 version of :not(), cho phép bộ chọn phức tạp đối số, đặt nó on par with jQuery's hitherto non-standard implementation. Xem release notes. current incarnation of :not() chỉ cho phép một bộ chọn đơn giản cho một đối số, do đó, một bộ chọn phức tạp như p div sẽ không hoạt động trong các trình duyệt hiện tại theo thiết kế.

Bộ chọn phức là một biểu thức bao gồm một hoặc nhiều bộ chọn hợp chất được phân tách bằng bộ tổ hợp như con cháu, >, ~ và +. Bộ chọn ghép là một chuỗi gồm một hoặc nhiều bộ chọn đơn giản. div là bộ chọn ghép bao gồm một bộ chọn đơn giản và p div là bộ chọn phức tạp gồm hai bộ chọn hợp chất (mỗi bộ chọn bao gồm một bộ chọn đơn giản), được phân tách bằng bộ kết hợp hậu duệ.Hiện tại không biết khi nào nó sẽ được đưa vào các trình duyệt khác, mặc dù không có đặc tả mới nào của :not() sẽ thay đổi vào thời điểm này - định nghĩa mức 4 hiện tại là không có trí tuệ và nếu biến dạng WebKit ban đầu là táo bạo đủ để thực hiện nó, sau đó nó thực sự chỉ là một vấn đề thời gian trước khi nó thực hiện theo cách của mình vào các chủng khác (bao gồm cả Blink).

Sau gần năm năm mệt mỏi chờ đợi kể từ khi FPWD, chúng tôi thực sự cuối cùng cũng có thể thấy CR của selectors-4 thật sớm. Hãy xem xét tôi bơm.

Answer 2

Từ the spec:

Sự phủ pseudo-class,: không (X), là một kí hiệu chức năng tham gia một đơn giản chọn (trừ sự phủ định pseudo-class bản thân) là một cuộc tranh cãi. Nó đại diện cho một phần tử không được đại diện bởi đối số của nó.

và elsewhere in the spec:

Một bộ chọn đơn giản là một trong hai loại selector, chọn phổ quát, chọn thuộc tính, lớp chọn, chọn ID, hoặc pseudo-class.

---

Hành vi của Chrome và Firefox là chính xác. Một combinator hậu duệ có thể không xuất hiện trong một selector đơn giản (và do đó, a: không pseudo-class)

---

này có thể thay đổi trong Selectors Cấp 4. hiện editor's draft phép selectors phức tạp hơn. Dường như bạn đã gặp phải triển khai thử nghiệm.