Trong HTML, cả hai lớp :lang() giả và công cụ chọn thuộc tính sẽ khớp với phần tử có thuộc tính tương ứng lang.
Sự khác biệt là trình duyệt có thể có các cách xác định ngôn ngữ khác của một yếu tố nhất định khi kiểm tra lớp học :lang() giả có thể được xác định bằng ngôn ngữ tài liệu và/hoặc việc triển khai, trong khi bộ chọn thuộc tính sẽ chỉ kiểm tra phần tử cho có thuộc tính mà không có bất kỳ ngữ nghĩa dựa trên tài liệu nào đi kèm.
Ví dụ: trong HTML, lớp giả cũng sẽ khớp với bất kỳ phần tử con nào của phần tử không có khác nhau lang, tùy thuộc vào cách trình duyệt xác định ngôn ngữ cho các hậu duệ đó. Thông thường, các hậu duệ sẽ kế thừa thuộc tính ngôn ngữ từ tổ tiên của chúng nếu nó không được thiết lập rõ ràng.
Từ spec:
Sự khác biệt giữa :lang(C) và '| =' hành là '| =' nhà điều hành chỉ thực hiện một so sánh với một thuộc tính nhất định trên nguyên tố này, trong khi :lang(C) pseudo- lớp sử dụng kiến thức UAs về ngữ nghĩa của tài liệu để thực hiện so sánh.
Trong ví dụ HTML này, chỉ có BODY phù hợp [lang|=fr] (vì nó có một thuộc tính LANG) nhưng cả BODY và P trận đấu :lang(fr) (vì cả hai đều bằng tiếng Pháp). P không khớp với [lang|=fr] vì nó không có thuộc tính LANG.
<body lang=fr>
<p>Je suis français.</p>
</body>
Trong ví dụ của bạn, chọn sau đây cũng sẽ phù hợp .foo yếu tố của bạn:
.foo:lang(en)
Nhưng selectors sau sẽ không, nếu nó không có lang thuộc tính riêng của mình set:
.foo[lang="en"]
.foo[lang|="en"]
Đối với hỗ trợ trình duyệt, :lang() pseudo-class được hỗ trợ bắt đầu từ IE8, vì vậy IE7 thực sự là trình duyệt duy nhất bạn sẽ không thể hỗ trợ bằng cách sử dụng lớp giả trên bộ chọn thuộc tính.
Selectors 4 giới thiệu :dir() pseudo-class cho phù hợp với các yếu tố dựa trên directionality của họ.Bởi vì directionality là một thuộc tính liên quan đến ngôn ngữ, các thuộc tính dir và lang hoạt động tương tự trong HTML và sự khác biệt giữa :dir() và bộ chọn thuộc tính tương ứng của nó tương tự như giữa :lang() và bộ chọn thuộc tính tương ứng của nó - đến điểm mà câu đầu tiên của báo giá sau đây là trong thực tế, một word-cho-word copy của cùng một đoạn trong phần mô tả :lang():
sự khác biệt giữa: dir (C) và '' [dir = C] '' là '' [dir = C] '' chỉ thực hiện so sánh với thuộc tính đã cho trên phần tử, trong khi lớp giả: dir (C) sử dụng kiến thức UAs về ngữ nghĩa của tài liệu để thực hiện so sánh. Ví dụ, trong HTML, định hướng của một phần tử kế thừa sao cho một đứa trẻ không có thuộc tính dir sẽ có cùng một hướng như tổ tiên gần nhất của nó với một thuộc tính dir hợp lệ. Một ví dụ khác, trong HTML, một phần tử khớp với '' [dir = auto] '' sẽ khớp với: dir (ltr) hoặc: dir (rtl) tùy thuộc vào định hướng được giải quyết của các phần tử được xác định bởi nội dung của nó. [HTML5]
Giải thích tuyệt vời, cảm ơn bạn! – john
Thuộc tính 'xml: lang' có thể ẩn với trình duyệt web không (vì trình duyệt web là trình phân tích cú pháp HTML chứ không phải trình phân tích cú pháp XML)? Tôi đã cố gắng sử dụng các bộ chọn được liệt kê trong [bài viết w3 này] (http://www.w3.org/International/questions/qa-css-lang) thông qua CSS của người dùng nhưng chúng không hoạt động trên [trang web này ] (http://www7a.biglobe.ne.jp/~nifongo/av/t23_1.htm). Phần tử '' trên trang web tiếng Nhật đó chỉ xác định thuộc tính 'xml: lang' chứ không chỉ định thuộc tính' lang'. –
@ 3to5businessdays: Có, mặc dù tôi nên chỉ ra rằng các trình duyệt hiện đại thực sự có cả hai trình phân tích cú pháp HTML và XML - cái nào được sử dụng được xác định bởi loại nội dung do máy chủ đưa ra. Bất kể, nếu phần tử '' chỉ chứa thuộc tính 'xml: lang' chứ không phải thuộc tính' lang', thì nó không hợp lệ. Điều này là do, trong HTML, chỉ có thuộc tính 'lang' được áp dụng, và đó là lý do tại sao': lang() 'giả không khớp. – BoltClock