Bộ chọn CSS: div đầu tiên trong id hoặc lớp

Question

Bộ chọn CSS thích hợp để chọn div đầu tiên trong một lớp học hoặc với một id cụ thể là gì? Điều này có vẻ dễ dàng hơn nhiều với các phần tử cha/con nhưng tôi không tìm thấy bất kỳ điều gì cho các phần tử đơn giản.

Cập nhật: giải pháp

Giải pháp sạch nhất, tương thích nhất mà tôi tìm thấy là .class ~ .class mà chọn tất cả các lớp sau đó làm theo các lớp học cũ. Ví dụ, nếu bạn muốn loại bỏ các biên giới hàng đầu từ phần tử đầu tiên trong lớp học bạn sẽ:

<style> 
    .dolphin { 
     border-top:0; 
     } 
    .dolphin ~ .dolphin { 
     border-top:1px solid #000; 
     } 
</style> 

Answer 1

Nếu bạn muốn chọn div đầu tiên trong một lớp học cụ thể thì bạn có thể sử dụng:

.class div:first-child 

Tuy nhiên điều này sẽ không hoạt động khi bạn đã có đoạn HTML sau:

<div class="class"> 
    <h1>The title</h1> 
    <div>The CSS won't affect this DIV</div> 
</div> 

Nó sẽ không làm việc vì div không phải là đứa con đầu lòng của .class.Nếu bạn wan't để nhắm mục tiêu mà div trong trường hợp này tôi muốn đề nghị thêm thùng chứa khác (hoặc thêm một lớp học để mà div bất cứ điều gì bạn thích :))

Answer 2

bạn có thể sử dụng

.class div:first-child{ your css }

Answer 3

Chỉ cần sử dụng id - Nó phải là duy nhất để trang và do đó bạn biết chính xác mục nào bạn đang tác động

Answer 4

Để chọn div đầu tiên trong một lớp tôi khuyên bạn nên sử dụng phương pháp này

.yourClassName > div:first-child{ 
    // Your properties 
} 

tương tự nếu bạn muốn chọn trong một id chỉ làm điều này

#yourUniqueId > div:first-child{ 
    // Your properties 
} 

nhưng nếu bạn có một id của bạn nên CHỈ có một trong anyway nếu không bạn sẽ được mã hóa không hợp lệ HTML , chỉ cần sử dụng công cụ chọn đơn giản như thế này cho số

#yourID{ 
    // Your Properties 
} 

của id) cũng lưu ý rằng trong câu trả lời của @ sourcecode mà anh ấy hiện không có> trong ví dụ của mình mà không này nó sẽ không chọn div đầu tiên trong một lớp học mà sẽ chọn mỗi div đầu tiên trong đó kiểm tra lớp fiddle này ra cho một ví dụ về điều đó

Demo First Selector from each group

và đây là một demo của câu trả lời của tôi

Demo First Selector ONLY

Answer 5

Bạn có thể sử dụng các lớp học giả sau đây:

1. : first-child
2. : nth-con (1)

Hoặc bạn có thể chọn bằng ID:

1. #elementID
2. div [id = "elementID"]

Sự khác biệt giữa hai bên trên là ở đặc hiệu; việc sử dụng "#elementID" sẽ có độ đặc hiệu cao hơn (ưu tiên) so với sử dụng công cụ chọn thuộc tính "div [id =" elementID "] nhưng cả hai đều là cách chọn đúng yếu tố.