CSS chọn đứa con đầu lòng từ các yếu tố trong đó đặc biệt thuộc tính

Question

Cho phép nói rằng chúng ta có đoạn mã sau:

<node> 
    <element bla="1"/> 
    <element bla="2"/> 
    <element bla="3"/> 
    <element bla="3"/> 
    <element bla="3"/> 
    <element bla="4"/> 
</node> 

Làm thế nào bạn sẽ đi về việc chọn lựa những đứa con đầu lòng đã thuộc tính bằng 3? Tôi đã suy nghĩ rằng có lẽ điều này có thể thực hiện công việc:

element[bla="3"]:first-child 

... nhưng nó đã không làm việc

Answer 1

Các :first-child pseudo-class chỉ nhìn vào các nút con đầu lòng, vì vậy nếu isn đứa con đầu lòng' t an element[bla="3"], sau đó không có gì được chọn.

Không có lớp giả lọc tương tự cho thuộc tính. Một cách dễ dàng xung quanh điều này là chọn mỗi người sau đó loại trừ những gì xảy ra sau khi người đầu tiên (thủ thuật này được giải thích here và here):

element[bla="3"] { 
} 

element[bla="3"] ~ element[bla="3"] { 
    /* Reverse the above rule */ 
} 

này, tất nhiên, chỉ có tác dụng để áp dụng phong cách; nếu bạn muốn chọn ra rằng yếu tố cho các mục đích khác hơn là phong cách (kể từ khi đánh dấu của bạn dường như là XML tùy ý chứ không phải HTML), bạn sẽ phải sử dụng một cái gì đó khác như document.querySelector():

var firstChildWithAttr = document.querySelector('element[bla="3"]'); 

Hoặc một biểu thức XPath:

//element[@bla='3'][1]