: đứa con đầu lòng không hoạt động như mong đợi

96

Tôi đang cố gắng chọn cái đầu tiên h1bên trong a divvới một lớp được gọi detail_container. Nó hoạt động nếu h1là phần tử đầu tiên bên trong này div, nhưng nếu nó xuất hiện sau phần tử này , ulnó sẽ không hoạt động.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

Tôi có ấn tượng rằng CSS mà tôi có sẽ chọn đầu tiên cho h1dù nó ở đâu trong này div. Làm thế nào tôi có thể làm cho nó hoạt động?

css css-selectors

— Người đàn ông Muffin
nguồn

1

Bất cứ điều gì CSS không thể làm, JavaScript có thể.

— JCOC611

11

Đây là điều bạn có thể làm với CSS3 mặc dù :)

— BoltClock

216

Bộ h1:first-childchọn có nghĩa là

Chọn con đầu tiên của cha mẹ của nó
nếu và chỉ nếu nó là một h1phần tử.

Vật :first-childchứa ở đây là ul, và như vậy không thể thỏa mãn h1:first-child.

Có CSS3 :first-of-typecho trường hợp của bạn:

.detail_container h1:first-of-type
{
    color: blue;
}

Nhưng với những rắc rối về khả năng tương thích của trình duyệt và những vấn đề khác, bạn nên chọn h1lớp đầu tiên , sau đó nhắm mục tiêu lớp đó:

.detail_container h1.first
{
    color: blue;
}

— BoltClock
nguồn

2

Bây giờ tôi đã hiểu, mặc dù tôi nghĩ họ nên triển khai cả hai phiên bản khi họ tạo ra tiêu chuẩn.

— The Muffin Man

Không hoạt động trong bản phát hành IE9. Nó nói h1: unknown trong công cụ phát triển

— Cine

11

Danh sách khả năng tương thích của :first-of-typebộ chọn.

— Jess Telford

4

Danh sách tương thích mới hơn của :first-of-type. Liên kết cũ không chính xác.

— BadHorsie

Theo quan điểm của tôi, thuật ngữ :first-childnày không rõ ràng để hiểu, bởi vì bạn xác định mục là bộ chọn CSS h1, và sau đó bạn nghĩ rằng "lấy con đầu tiên" của tất cả trong cấp DOM đã chọn. Tôi đã sử dụng nó sai rất nhiều lần ... Chúng tôi phải làm quen với :first-of-typebộ chọn và nghĩ về đứa con đầu tiên của loại hình này.

— Kai Noack

13

:first-childchọn h1 nếu và chỉ đầu tiên nếu nó là con đầu tiên của phần tử mẹ của nó. Trong ví dụ của bạn, cái ullà đứa con đầu tiên của div.

Tên của lớp giả có phần gây hiểu nhầm, nhưng nó được giải thích khá rõ ràng ở đây trong thông số kỹ thuật.

:firstBộ chọn của jQuery cung cấp cho bạn những gì bạn đang tìm kiếm. Bạn có thể làm được việc này:

$('.detail_container h1:first').css("color", "blue");

— Rob Sobers
nguồn

Đúng của bạn, nó là sai lầm, tôi chủ yếu bị nhầm lẫn vì tôi đã sử dụng jQuery để làm điều này trước đây.

— The Muffin Man

9

Đối với trường hợp cụ thể đó, bạn có thể sử dụng:

.detail_container > ul + h1{ 
    color: blue; 
}

Nhưng nếu bạn cần cùng một bộ chọn trong nhiều trường hợp, bạn nên có một lớp cho chúng, như BoltClock đã nói.

— Grekz
nguồn

Bạn không nên có bất kỳ vấn đề. Đây là tham chiếu w3.org/TR/CSS2/selector.html#child-selectors

— Grekz

6

bạn cũng có thể dùng

.detail_container h1:nth-of-type(1)

Bằng cách thay đổi số 1 bằng bất kỳ số nào khác, bạn có thể chọn bất kỳ mục h1 nào khác.

— Fabrice
nguồn

1

Bạn có thể bọc các h1thẻ của mình trong một thẻ khác divvà sau đó thẻ đầu tiên sẽ là first-child. Điều đó divthậm chí không cần phong cách. Đó chỉ là một cách để cách ly những đứa trẻ đó.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>

— GhostToast
nguồn

0

Phần tử không thể kế thừa trực tiếp từ <body>thẻ. Bạn có thể thử đặt nó vào một <dir style="padding-left:0px;"></dir>thẻ.

— Edmond Chow
nguồn