2011-09-06 41 views
47

Tôi vừa thấy mã CSS bao gồm thẻ ::before. Tôi đã xem MDN để xem những gì ::before là nhưng tôi thực sự không hiểu nó. Ai đó có thể giải thích nó hoạt động như thế nào? Liệu nó có tạo thành phần tử DOM trước khi chúng ta chọn CSS không?Sự khác nhau giữa: trước và :: trước là gì?

+1

Afaik, Tổ công tác CSS quyết định tiền tố giả yếu tố với một thư ruột kết thêm để phân biệt chúng từ pseudo-lớp mà chỉ có một thư ruột kết. –

+5

... và vì ký hiệu dấu hai chấm không được thực hiện trong IE8, chúng ta sẽ phải đợi 'cho đến khi nó được xóa khỏi thị trường (như trong năm 2016 hoặc hơn), trước khi chúng ta có thể bắt đầu sử dụng ':: before'. Công việc tuyệt vời, các phần tử giả của Microsoft '-.-' –

+1

đã tồn tại từ CSS1. Các phần tử giả đầu tiên là ': first-letter' và': first-line'. – BoltClock

Trả lời

12

Điều này phân biệt các phần tử giả từ các lớp giả.

Sự khác biệt giữa các lớp giả và các yếu tố giả được mô tả tại http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html

+3

:: trước khi ký hiệu (với hai dấu hai chấm) được giới thiệu trong CSS3 để thiết lập sự phân biệt giữa các lớp giả và các phần tử giả. Các trình duyệt cũng chấp nhận ký hiệu: trước khi được giới thiệu trong CSS 2. Nguồn: https: //developer.mozilla.org/en-US/docs/Web/CSS/:: trước đây Như trước đây là một ELEMENT giả và không phải là một lớp giả (như: hover) hai dấu hai chấm là tốt hơn (do đó theo tiêu chuẩn CSS3). – JoostS

35

Theo những tài liệu, họ là tương đương:

element:before { style properties } /* CSS2 syntax */ 

element::before { style properties } /* CSS3 syntax */ 

Sự khác biệt duy nhất là ruột kết đôi được sử dụng trong CSS3, trong khi tràng duy nhất là phiên bản di sản.

Lập luận:

Các :: trước khi ký hiệu đã được giới thiệu trong CSS 3 để thiết lập một phân biệt đối xử giữa pseudo-class và pseudo-yếu tố. Các trình duyệt cũng chấp nhận ký hiệu: trước khi được giới thiệu trong CSS 2.

5

Về cơ bản, chúng có cùng ý nghĩa. Các :: đã được giới thiệu trong CSS3 để giúp descriminate giữa các phần tử giả (như: trước và sau) và các lớp giả (như: liên kết và: hover).

2

Một là cách CSS2 (: trước) và cách kia là CSS3 (:: trước). Hiện tại, chúng có thể hoán đổi cho nhau trong các trình duyệt hỗ trợ CSS2 & CSS3.

Dưới đây là một lời giải thích tốt: http://www.impressivewebs.com/before-after-css3/

3

Tôi đã kiểm tra ra MDNw3.org, và tốt nhất mà tôi có thể đưa ra được rằng :: được sử dụng cho cấu thay đổi, và : được sử dụng cho styling.

Chúng hiện có thể hoán đổi cho nhau vì lý do tương thích.

Nó dường như tách :link (ví dụ), mà phong cách một <a>, từ :before (đó là một sự thay đổi cấu trúc ).

: dùng để tạo kiểu, :: là dành cho cấu trúc.

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