Có phải "div> p" & "div p" giống nhau không?

Question

Hey, tôi đã có một câu hỏi rõ ràng.

Đối với mã như:

<div> 
    <p>We want to format this text :)</p> 
</div> 

Một số người sử dụng chọn như:

div > p { 
    something 
} 

Và những người khác:

div p { 
    something 
} 

sự khác biệt trong trường hợp này là gì? Theo tôi - không?

Và nhân tiện, không phải là hậu duệ luôn là một đứa trẻ ?! Sự khác nhau giữa hai cái là gì? Tôi đang đọc w3.org nhưng không thể tải xuống được :)

Cảm ơn bạn!

Answer 1

đơn giản:

div > p 

chỉ ảnh hưởng đến trẻ em trực tiếp.

div p 

ảnh hưởng đến cháu, grandgrandchildren, vv là tốt. (Sẽ không tạo sự khác biệt trong ví dụ của bạn)

Bộ chọn con isn't supported by IE6.

Answer 2

Pekka đã giải thích nó theo lý thuyết trong his answer. Dựa trên câu trả lời của anh ấy và my answer to another question about the > combinator, tôi sẽ cung cấp một minh họa, được sửa đổi để giải quyết câu hỏi này.

Hãy xem xét khối HTML sau đây và bộ chọn CSS mẫu của bạn. tôi sử dụng một ví dụ phức tạp hơn vì vậy tôi có thể cho bạn thấy sự khác biệt giữa hai bộ chọn của bạn:

<div> 
    <p>The first paragraph.</p>     <!-- [1] --> 
    <blockquote> 
     <p>A quotation.</p>      <!-- [2] --> 
    </blockquote> 
    <div> 
     <p>A paragraph after the quotation.</p> <!-- [3] --> 
    </div> 
</div> 

nào <p> s được lựa chọn bởi đó selectors?

Trước hết, tất cả trong số họ phù hợp với div p, vì họ là <p> yếu tố nằm bất cứ nơi nào trong một yếu tố <div>.

Điều đó làm cho div > p cụ thể hơn, trong đó đặt ra câu hỏi tiếp theo:

nào <p> s được lựa chọn bởi div > p?

1. chọn Đã

   này đoạn <p> là một đứa trẻ, hoặc một hậu duệ trực tiếp, trong ngoài cùng <div>. Điều đó có nghĩa là nó không được chứa ngay bởi bất kỳ phần tử nào khác ngoài <div>. Hệ thống phân cấp đơn giản như bộ chọn mô tả, và như vậy nó được chọn bởi div > p.

2. Không chọn

   <p> này được tìm thấy trong một phần tử <blockquote>, và các yếu tố <blockquote> được tìm thấy trong ngoài cùng <div>. Các hệ thống phân cấp như vậy sẽ trông như thế này:

   div > blockquote > p 
   

   Như đoạn được chứa trực tiếp bởi một blockquote, nó không chọn bởi div > p. Tuy nhiên, số điện thoại có thể khớp với blockquote > p (nói cách khác, đó là con của <blockquote>).

3. chọn

   cuộc sống Đoạn này trong khu vực nội <div>, được chứa bởi ngoài <div>. Các hệ thống phân cấp sẽ trông như thế này:

   div > div > p 
   

   Nó không quan trọng nếu có nhiều <div> s lồng vào nhau, hoặc thậm chí nếu <div> s được chứa bởi các yếu tố khác. Miễn là đoạn này được chứa trực tiếp bởi chính nó <div>, nó sẽ được chọn bởi div > p.