Có bộ chọn CSS nào cho con trực tiếp đầu tiên không?

315

Tôi có html sau

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

Và phong cách sau:

DIV.section DIV:first-child 
{
  ...
}

Vì một số lý do mà tôi không hiểu phong cách đang được áp dụng cho "nội dung phụ 1" <div> cũng như "tiêu đề" <div> .

Tôi nghĩ rằng bộ chọn trên kiểu sẽ chỉ áp dụng cho con trực tiếp đầu tiên của div với một lớp gọi là "phần". Làm cách nào để thay đổi bộ chọn để có được thứ tôi muốn?

html css css-selectors

— Jeremy
nguồn

3

jsfiddle.net/joelpurra/7t5CK

— Joel Purra

519

Những gì bạn đã đăng theo nghĩa đen là "Tìm bất kỳ div nào bên trong phần div và là con đầu tiên của cha mẹ chúng." Các phụ chứa một thẻ phù hợp với mô tả đó.

Tôi không rõ liệu bạn có muốn cả hai đứa con của div chính hay không. Nếu vậy, sử dụng này:

div.section > div

Nếu bạn chỉ muốn tiêu đề, sử dụng này:

div.section > div:first-child

Sử dụng các >thay đổi mô tả thành: "Tìm bất kỳ div nào là hậu duệ trực tiếp của div div", đó là những gì bạn muốn.

Xin lưu ý rằng tất cả các trình duyệt chính đều hỗ trợ phương pháp này, ngoại trừ IE6. Nếu hỗ trợ IE6 là nhiệm vụ quan trọng, thay vào đó, bạn sẽ phải thêm các lớp cho các div con và sử dụng nó. Nếu không, nó không đáng quan tâm.

— Matchu
nguồn

8

: con đầu tiên là không bắt buộc, trong trường hợp này.

— ảm đạm

3

có vẻ như OP không hỏi về bộ chọn nhiều như lý do tại sao quy tắc này được áp dụng cho tất cả các div con.

— Doug Neiner

Giải thích của tôi là anh ta có được khái niệm kế thừa CSS và nghĩ rằng đứa con đầu lòng sẽ có tác dụng mà> có. Đó là từ ngữ không rõ ràng.

— Matchu

3

À, niềm vui của việc đủ tuổi để nhớ khi bộ chọn 'hậu duệ trực tiếp' sẽ giải quyết tất cả các vấn đề của bạn nhưng bạn không thể sử dụng nó vì nó không hoạt động trong IE . Nhiều thất vọng không cần thiết sau đó sẽ xảy ra.

— aroth

Nó cũng áp dụng cho đứa con đầu lòng của đứa trẻ linh sam. Nếu thực sự cần phải áp dụng những thay đổi chỉ ở đứa trẻ đầu tiên, chúng ta phải hủy bỏ những thay đổi trên con của đứa trẻ. Một cái gì đó như thế này:div.section > div:first-child > div { /* Cancel Changes*/}

— Mahdi J.Ansari

51

Tìm thấy câu hỏi này tìm kiếm trên Google. Điều này sẽ trả về đứa con đầu tiên của một phần tử với lớp container, bất kể đứa trẻ đó thuộc loại nào.

.container > *:first-child
{
}

— Tom Gullen
nguồn

44

CSS được gọi là Cascading Style Sheets vì các quy tắc được kế thừa. Sử dụng bộ chọn sau, sẽ chỉ chọn con trực tiếp của cha mẹ, nhưng các quy tắc của nó sẽ được kế thừa bởi divcon của chúng divs:

div.section > div { color: red }

Bây giờ, cả điều đó div và con cái của nó sẽ được red. Bạn cần hủy bỏ bất cứ điều gì bạn đặt ra cho cha mẹ nếu bạn không muốn nó kế thừa:

div.section > div { color: red }
div.section > div div { color: black }

Bây giờ chỉ có divmột đứa trẻ là con trực tiếp div.sectionsẽ có màu đỏ, nhưng con của nó divsvẫn sẽ có màu đen.

— Doug Neiner
nguồn

6

div.section > div

— ảm đạm
nguồn

6

Sử dụng div.section > div.

Tốt hơn nữa, hãy sử dụng <h1>thẻ cho tiêu đề và div.section h1trong CSS của bạn, để hỗ trợ các trình duyệt cũ hơn (không biết về >) và giữ cho ngữ nghĩa đánh dấu của bạn.

— ЯegDight
nguồn

Ý kiến hay, thật không may, tôi cũng cần hỗ trợ IE6 và nếu tôi sử dụng h1, tôi sẽ cần đặt kích thước phông chữ để kế thừa sao cho phông chữ phù hợp với cơ thể, và tức là7 và bên dưới không hỗ trợ kế thừa. tranh luận

— Jeremy

Ngoài ra, tôi có div con và đặt div con trong h1 phá vỡ quy tắc, mặc dù IE hoàn trả nó, tôi không chắc các trình duyệt khác làm gì

— Jeremy

3

Bộ chọn CSS cho con đầu tiên trực tiếp trong trường hợp của bạn là:

.section > :first-child

Bộ chọn trực tiếp là> và bộ chọn con đầu tiên là: con đầu tiên

Không cần phải có dấu hoa thị trước: như những người khác đề xuất. Bạn có thể tăng tốc tìm kiếm DOM bằng cách sửa đổi giải pháp này bằng cách thêm thẻ:

div.section > :first-child

— Matt Parkins
nguồn