Sự khác biệt giữa '>' và khoảng trắng trong bộ chọn CSS là gì?

126

Điểm nào sử dụng cú pháp này

div.card > div.name

Sự khác biệt giữa cái này là gì

div.card div.name

css css-selectors

— Randy Mayer
nguồn

Hơn nữa với câu hỏi này, vì tôi không nhận thức được điều này và có thể được sử dụng để giải quyết vấn đề tôi gặp phải, trình duyệt nào hỗ trợ loại bộ chọn này?

— Kyle

3

Nó được hỗ trợ trong tất cả các trình duyệt hiện tại. IE đã nhận được hỗ trợ trong phiên bản 7: msdn.microsoft.com/en-us/l

— Library / trộm

210

A > B sẽ chỉ chọn B là con trực tiếp đến A (nghĩa là không có yếu tố nào khác ở giữa).

A B sẽ chọn bất kỳ B nào bên trong A, ngay cả khi có các yếu tố khác giữa chúng.

— Matti Virkkunen
nguồn

11

>là bộ chọn con. Nó chỉ định các yếu tố con ngay lập tức và không có bất kỳ hậu duệ nào (bao gồm cháu, cháu, v.v.) như trong ví dụ thứ hai mà không có >.

Bộ chọn con không được IE 6 hỗ trợ và thấp hơn. Một bảng tương thích tuyệt vời là ở đây .

— Bắc Kinh
nguồn

2

div.card > div.namephù hợp <div class='card'>....<div class='name'>xxx</div>...</div> nhưng nó không phù hợp<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name phù hợp với cả hai.

Đó là, >bộ chọn đảm bảo rằng phần tử được chọn ở phía bên phải >là phần tử con của phần tử ở phía bên trái của nó.

Cú pháp không có >bất kỳ kết quả nào <div class='name'>là con cháu (không chỉ là con) <div class='card'>.

— René Nyffalanger
nguồn

0

A> B chọn B nếu đó là con trực tiếp của A, trong khi AB chọn B cho dù đó có phải là con trực tiếp của B hay không.

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>

Mở rộng đoạn trích

— eozten
nguồn

Có một đoạn mã ở đây. Tôi không biết nếu bạn có thể nhìn thấy nó.

— eozten

Bản demo rất hay nhưng thực sự chỉ là phụ trợ cho thông tin trả lời câu hỏi; thông tin đã có trong ba câu trả lời khác. Có thể nếu câu hỏi này được hỏi ngày hôm nay, điều đó sẽ hữu ích, nhưng nếu bạn sẽ bắt đầu một câu hỏi> 8 tuổi, thì nó thực sự nên là một lý do thuyết phục.

— TylerH

0

> so với không gian

Hãy xem xét hai kịch bản div > span { }vs.div span { }

Ở đây, <space>chọn tất cả các <span>phần tử của <div>phần tử ngay cả khi chúng nằm trong phần tử khác. > Chọn tất cả các <div>phần tử con của phần tử nhưng nếu chúng nằm trong phần tử khác.

> (Lớn hơn):

div > span {
  color: #FFBA00 ;
}

<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>

Mở rộng đoạn trích

Cái này chỉ cần chọn <span>World!</span>và nó sẽ không tìm kiếm thẻ <span>bên trong <p>.

Không gian

div span {
  color: #FFBA00 ;
}

<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
<body>

Mở rộng đoạn trích

Cái này chọn tất cả các thẻ span, ngay cả khi chúng được lồng bên trong một thẻ khác.

— S.Goswami
nguồn