Bộ chọn CSS con và con cháu

Tôi có một chút nhầm lẫn giữa 2 bộ chọn này.

Liệu các hậu duệ chọn:

div p

chọn tất cả ptrong một divliệu có hay không ngay lập tức? Vì vậy, nếu plà bên trong khác, divnó vẫn sẽ được chọn?

Sau đó, bộ chọn con :

div > p

Có gì khác biệt? Có phải một đứa trẻ có nghĩa là đứa trẻ ngay lập tức ? Ví dụ.

<div><p>

đấu với

<div><div><p>

cả hai sẽ được chọn, hay không?

Chỉ cần nghĩ về những từ "trẻ em" và "hậu duệ" trong tiếng Anh:

• Con gái tôi vừa là con tôi vừa là con cháu của tôi
• Cháu gái tôi không phải là con tôi, nhưng cháu là con cháu của tôi.

Ư, bạn đung. div psẽ phù hợp với ví dụ sau, nhưng div > psẽ không.

<div><table><tr><td><p> <!...

Cái đầu tiên được gọi là bộ chọn con cháu và cái thứ hai được gọi là bộ chọn con .

Về cơ bản, " ab " chọn tất cả b bên trong a, trong khi " a> b " chọn b là những gì chỉ là con của a , nó sẽ không chọn b là con của b là con của a .

Ví dụ này minh họa sự khác biệt:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

Màu nền của abc và def sẽ là màu xanh lá cây, nhưng ghi sẽ có màu nền đỏ.

QUAN TRỌNG: Nếu bạn thay đổi thứ tự của các quy tắc thành:

div>span{background:green}
div span{background:red}

Tất cả các chữ cái sẽ có nền màu đỏ, vì bộ chọn con cháu cũng chọn con.

Về lý thuyết: Con => hậu duệ ngay lập tức của tổ tiên (ví dụ Joe và cha)

Hậu duệ => bất kỳ yếu tố nào được truyền lại từ một tổ tiên cụ thể (ví dụ Joe và ông cố của ông)

Trong thực tế: hãy thử HTML này:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

với CSS này:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

Xin lưu ý rằng bộ chọn con không được hỗ trợ trong Internet Explorer 6. (Nếu bạn sử dụng bộ chọn trong bộ chọn jQuery / Prototype / YUI, v.v. chứ không phải trong một biểu định kiểu, nó vẫn hoạt động)

div p 

Chọn tất cả các phần tử 'p' trong đó phần tử cha là phần tử 'div'

div> p

Nó có nghĩa là con ngay lập tức Chọn tất cả các phần tử 'p' trong đó cha mẹ là phần tử 'div'

Lựa chọn CSS và áp dụng kiểu cho một phần tử cụ thể có thể được thực hiện thông qua duyệt qua phần tử dom [Ví dụ

Thí dụ

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>