Bộ chọn CSS nào có thể được sử dụng để chọn div đầu tiên trong một div khác

95

Tôi có một cái gì đó như:

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

Bộ chọn css cho div thứ hai (div thứ nhất trong div "nội dung") để tôi có thể đặt màu phông chữ của ngày trong div đó là gì?

css css-selectors

— GregH
nguồn

1

Hãy chấp nhận câu trả lời được bình chọn hàng đầu, nó chắc chắn chính xác.

— Barry Michael Doyle

223

Câu trả lời ĐÚNG NHẤT cho câu hỏi của bạn là ...

#content > div:first-of-type { /* css */ }

Điều này sẽ áp dụng CSS cho div đầu tiên là con trực tiếp của #content (có thể có hoặc không phải là phần tử con đầu tiên của #content)

Một lựa chọn khác:

#content > div:nth-of-type(1) { /* css */ }

— Jeremy Moritz
nguồn

6

Đồng ý rằng đó là câu trả lời DUY NHẤT cho câu hỏi và nó phải được chấp nhận.

— Ilya Streltsyn

Bạn có thể cho tôi biết làm thế nào để chọn tất cả div exceptđầu tiên / div cuối cùng?

— Tân

4

@HappyCoding #content > div:not(:last-of-type) { /* css */ }

— Jeremy Moritz,

@ Tân nếu bạn muốn tất cả div ngoại trừ đầu tiên VÀ cuối cùng, nó sẽ là ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }

— Jeremy Moritz

20

Bạn muốn

#content div:first-child {
/*css*/
}

— Capt Otis
nguồn

3

Sẽ không hiệu quả vì <div>không phải là đứa con đầu lòng (nó <h1>).

— Josh Leitzel

Chưa kể nó sẽ không hoạt động trong IE ngay cả khi ngày divđó là đứa con đầu tiên.

— Valentin Flachsel

1

Có thật không? W3 cho biết nó sẽ hoạt động miễn là loại tài liệu được chỉ định. (Thực sự tôi không biết mặc dù.)

— Josh Leitzel

3

Chỉ cần chạy một bài kiểm tra, thực sự nó hoạt động nếu loại tài liệu được chỉ định. Trong phòng của tôi, tôi sẽ không ngạc nhiên nếu những thứ bắt đầu làm việc trong IE nếu bạn muốn gõ <the_cake_is_a_lie> ở phía trên cùng của tập tin ...

— Valentin Flachsel

1

Tôi luôn kiểm tra trước khi đăng câu trả lời. Và chiếc bánh là một lời nói dối.

— Capt Otis

16

Nếu chúng ta có thể giả định rằng H1 luôn ở đó, thì

div h1+div {...}

nhưng đừng ngại chỉ định id của nội dung div:

#content h1+div {...}

Điều đó rất tốt vì bạn có thể tải nhiều trình duyệt ngay bây giờ mà không cần dùng đến thư viện JavaScript như jQuery. Sử dụng h1 + div đảm bảo rằng chỉ div đầu tiên sau H1 mới có kiểu dáng. Có những lựa chọn thay thế, nhưng chúng dựa vào bộ chọn CSS3 và do đó sẽ không hoạt động trên hầu hết các cài đặt IE.

— Stan Rogers
nguồn

+1. Thậm chí không nghĩ về điều đó. Hãy nhớ rằng giải pháp này sẽ không hoạt động trong IE6.

— Josh Leitzel

6

Điều gần nhất với những gì bạn đang tìm kiếm là : tân cổ điển đứa con đầu lòng ; Rất tiếc, điều này sẽ không hoạt động trong trường hợp của bạn vì bạn có <h1>trước <div>s. Những gì tôi sẽ đề xuất là bạn hoặc thêm một lớp vào <div>, thích <div class="first">và sau đó tạo kiểu cho nó theo cách đó, hoặc sử dụng jQuery nếu bạn thực sự không thể thêm một lớp:

$('#content > div:first')

— Josh Leitzel
nguồn

1

đánh vần sai - nên$('#content > div.first)

— Mateusz Odelga