Tại sao bộ chọn h3: nth-child (1): chứa ('a') hoạt động?

Question

Tôi chọn công cụ chọn này:

h3:nth-child(1):contains('a') 

bộ chọn không hoạt động?

tôi kiểm tra này trong firefinder và không trả lại gì (không phải thông tin rằng có yếu tố zero)

Sau đó kiểm tra này:

h3:nth-child(1) 

và nó sẽ trả về h3, vì vậy chọn là gần như tốt, nhưng cái gì đó với điều này (h3 có văn bản 'a') văn bản đi sai.

Answer 1

:contains() không sẽ là một selector CSS3 (thanks T.J. Crowder for the link), nhưng nó đã không làm cho nó, rất có thể vì cách nó hoạt động có xu hướng dẫn đến hiệu suất nghiêm trọng và quá lựa chọn vấn đề này. Ví dụ: nếu một phần tử E khớp với :contains() cho đối số chuỗi đã cho, thì tất cả tổ tiên của nó cũng sẽ khớp; sử dụng nó với một bộ chọn phổ quát sẽ dẫn đến kết quả bất ngờ với các thuộc tính phong cách nhất định, trên đầu trang bị chậm cho trình duyệt.

Không có bộ chọn CSS nào khác phục vụ mục đích như :contains(). Vì vậy, bạn sẽ phải tìm một cách nào đó khác, hoặc bằng cách sửa đổi HTML của bạn hoặc thậm chí bằng cách sử dụng jQuery :contains(), để đạt được hiệu quả mong muốn:

Chọn một yếu tố h3
nếu nó là đứa con đầu lòng của mình phụ huynh
và văn bản của nó chứa chữ 'a'.

Đối với người dùng jQuery và Selenium RC::contains() được thực hiện trong công cụ chọn sizzle sử dụng bởi jQuery, mà còn được sử dụng trong Selenium RC (nhưng không Selenium WebDriver). Nó hoạt động như mô tả in this decade-old revision of the CSS3 spec, nhưng một lần nữa, do cách mô tả thông số kỹ thuật, bạn cần sử dụng nó cẩn thận hoặc có thể dẫn đến các lựa chọn không mong muốn.

Trên ghi chú cuối cùng, h3:nth-child(1) có thể được thay thế bằng h3:first-child, dưới dạng bộ chọn CSS2 có hỗ trợ trình duyệt tốt hơn.

Answer 2

Nếu bạn đang cố gắng sử dụng :contains(a) để tìm một thẻ neo (chứ không phải là thư Một), bạn có thể sử dụng:

h3:nth-child(1) a 

hoặc

h3:first-child a