CSS con đầu tiên và cuối cùng không hoạt động khi được sử dụng trên cùng một phần tử

Question

Tôi vừa nhận thấy rằng CSS :first-child và :last-child không hoạt động khi được sử dụng trên cùng một phần tử. Chỉ một cái được sử dụng. Tôi tự hỏi tại sao đó và nếu có bất kỳ cách giải quyết nào trong CSS? Có vẻ như lỗi CSS đối với tôi - yếu tố đầu tiên cũng có thể là phần tử cuối cùng.

Tôi không thể tìm thấy bất kỳ thứ gì trong Google về chủ đề đó. Mỗi hướng dẫn giả định rằng sẽ có ít nhất 2 phần tử.

Tôi đang tìm một cái gì đó như: "con đầu tiên cũng là con cuối cùng" bộ chọn. Nó tồn tại?

Answer 1

Tôi tự hỏi tại sao điều đó và nếu có bất kỳ giải pháp nào khác trong CSS? Có vẻ như lỗi CSS đối với tôi - yếu tố đầu tiên cũng có thể là phần tử cuối cùng.

Nó không phải là lỗi. Đó là cách hoạt động của thác: nếu phần tử là cả con đầu tiên và con cuối cùng, thì nếu bạn có các quy tắcvà :last-child trong riêng biệt và cả hai đều khớp với cùng một yếu tố thì bất kỳ điều gì trong quy tắc cụ thể hơn ghi đè khác.

Bạn có thể tìm thấy ví dụ về hành vi này here, với thuộc tính viết tắt border-radius và cách giải quyết bao gồm sử dụng thuộc tính thành phần thay vì viết tắt, cũng như chỉ định một quy tắc riêng biệt sử dụng một trong các bộ chọn sau ...

Tôi đang tìm một cái gì đó như: "con đầu tiên cũng là con cuối cùng" chọn. Nó tồn tại?

Theo nghĩa đen, bạn sẽ chuỗi cả pseudo-lớp như thế này, mà hoạt động tốt:

:first-child:last-child 

Tuy nhiên tồn tại một pseudo-class đặc biệt đóng vai trò cùng một cách:

:only-child 

Sự khác biệt chính (trên thực tế, chỉ có chỉ có sự khác biệt) giữa hai bộ chọn này là đặc trưng: cái đầu tiên cụ thể hơn vì nó chứa thêm một lớp giả. Không có sự khác biệt ngay cả trong hỗ trợ trình duyệt, vì :last-child và :only-child đều được hỗ trợ bởi cùng một phiên bản chính xác của từng trình duyệt.

Answer 2

Tôi nhận ra rằng tôi đang rất muộn đến mức này, nhưng bạn cũng có thể sử dụng là :first-of-type và :last-of-type của CSS. Ví dụ:

<blockquote> 
    <p>Some text you want to quote</p> 
</blockquote> 

CSS này sẽ thêm dấu ngoặc kép để đoạn:

blockquote{ 
    quotes: "“" "”" "‘" "’"; 
} 

blockquote p:first-of-type:before{ 
    content:open-quote; 
} 

blockquote p:last-of-type:after{ 
    content:close-quote; 
}