Các :only-childbất động sản pseudo-class selector trong CSS đại diện cho một yếu tố mà có một yếu tố phụ huynh và có yếu tố phụ huynh không có trẻ em yếu tố khác. Điều này sẽ giống như :first-child:last-childhoặc :nth-child(1):nth-last-child(1), nhưng với độ đặc hiệu thấp hơn.
div p:only-child ( color: red; )Ví dụ: nếu chúng ta lồng các đoạn trong một cái như vậy…
This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent
Bây giờ chúng tôi có thể tạo kiểu duy nhất
của đứa con đầu lòng của chúng tôi . Phần tiếp theo và phần con của nó sẽ không bao giờ được tạo kiểu vì vùng chứa cha chứa nhiều hơn một phần tử con (tức là các thẻ p).
p:only-child ( color:red; )Chúng tôi cũng có thể kết hợp các lớp giả bổ sung như ví dụ này để chọn đoạn đầu tiên trong div lồng nhau của chúng tôi và con duy nhất của div.contain.
Hello World
some more children
div.contain div:only-child :first-child ( color: red; ):only-childsẽ không hoạt động như một bộ chọn nếu phần tử mẹ của bạn chứa nhiều hơn một thẻ con có thẻ giống hệt nhau. Ví dụ…
paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2
div.contain div:only-child ( color: red; )Điều này sẽ dẫn đến không có div kế thừa màu đỏ vì cha mẹ chứa nhiều hơn 1 con (3 div không có tên).
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 4 | 3.5 | 9 | 12 | 3.2 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |