Bộ chọn CSS CSS có ý nghĩa gì?

476

Ví dụ:

div > p.some_class {
  /* Some declarations */
}

Chính xác thì >dấu hiệu đó có ý nghĩa gì?

css css-selectors

— Misha Moroshko
nguồn

673

>là tổ hợp con , đôi khi được gọi nhầm là tổ hợp con cháu trực tiếp. ¹

Điều đó có nghĩa là bộ chọn div > p.some_classchỉ chọn các đoạn .some_classđược lồng trực tiếp bên trong a divchứ không chọn bất kỳ đoạn nào được lồng thêm bên trong.

Sự minh họa:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

Cái gì được chọn và cái gì không:

Đã chọn
Điều này p.some_classđược đặt trực tiếp bên trong div, do đó mối quan hệ cha-con được thiết lập giữa cả hai yếu tố.
Không được chọn
Điều này p.some_classđược chứa bởi một blockquotebên trong div, chứ không phải là divchính nó. Mặc dù đây p.some_classlà hậu duệ của divnó, nó không phải là một đứa trẻ; đó là một đứa cháu

Do đó, trong khi div > p.some_classsẽ không phù hợp với yếu tố này, div p.some_classsẽ, bằng cách sử dụng tổ hợp con cháu thay thế.

¹ _{Nhiều người đi xa hơn để gọi nó là "con trực tiếp" hoặc "con ngay lập tức", nhưng điều đó hoàn toàn không cần thiết (và cực kỳ khó chịu với tôi), bởi vì dù sao thì một yếu tố con là định nghĩa chính xác , vì vậy chúng có nghĩa chính xác là điều tương tự. Không có thứ gọi là "đứa trẻ gián tiếp".}

— BoltClock
nguồn

2

+1 Nó có thực sự được gọi là bộ chọn con không? Nếu vậy, đó là khá sai lệch. Tôi sẽ nghĩ #something asẽ là một bộ chọn con.

— alex

2

@alex: có :) #something acó thể có nghĩa alà một đứa cháu hoặc một đứa cháu tuyệt vời #something(nó không tính đến độ sâu của việc làm tổ).

— BoltClock

12

@alex Nó được gọi là tổ hợp con , không gian được gọi là tổ hợp con cháu

— robertc

33

Khi ai đó là con của ông bà, chúng ta đang đối phó với một trường hợp loạn luân thực sự khó chịu. Hạnh phúc, đó là điều không thể trong HTML.

— Quentin

8

Tôi không nghe thấy bất kỳ giáo dân nào gọi con cái họ là con cái trực tiếp của họ vì mục đích rõ ràng.

— BoltClock

41

> (lớn hơn dấu) là Bộ kết hợp CSS.

Một tổ hợp là một cái gì đó giải thích mối quan hệ giữa các bộ chọn.

Một bộ chọn CSS có thể chứa nhiều hơn một bộ chọn đơn giản. Giữa các bộ chọn đơn giản, chúng ta có thể bao gồm một tổ hợp.

Có bốn tổ hợp khác nhau trong CSS3:

bộ chọn hậu duệ (không gian)
bộ chọn con (>)
bộ chọn anh chị em liền kề (+)
bộ chọn anh chị em chung (~)

Lưu ý: < không hợp lệ trong bộ chọn CSS.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Đầu ra:

Thông tin thêm về Bộ kết hợp CSS

— Premraj
nguồn

developer.mozilla.org/en-US/docs/Learn/CSS/Int

— sinhtion_to_CSS / từ

@premraj Cảm ơn bạn đã giải thích tuyệt vời về bộ chọn css cha-con!

— YCode

Điều đó có nghĩa là gì khi bạn nhận được một cái gì đó giống như .entry-content > * {"code" }được theo sau .entry-content {"other code" }? Không .entry-content > *bao gồm tất cả các trẻ em của entry-content?

— YCode

14

Như những người khác đề cập, đó là một bộ chọn con. Đây là liên kết thích hợp.

http://www.w3.org/TR/CSS2/selector.html#child-selector

— Dagg Nợi
nguồn

Cảm ơn bạn rất nhiều về đường link dẫn ! Tôi cũng phát hiện ra "Bộ chọn anh chị em liền kề" ở đó.

— Misha Moroshko

Bạn sẽ tìm thấy hỗ trợ trình duyệt trên Sitepoint. Không hoạt động trong IE6 nếu nó quan trọng đối với các dự án của bạn, OK ở mọi nơi khác. Tài nguyên này là đặc biệt. hữu ích cho anh chị em ,: nth-child (), v.v ... nơi hỗ trợ vẫn chưa hoàn thành

— FelipeAls

10

Nó phù hợp với pcác yếu tố với lớp some_classmà là trực tiếp dưới div.

— dan04
nguồn

5

Tất cả pcác thẻ với lớp some_classlà con trực tiếp của divthẻ.

— tschaible
nguồn

4

html

<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>

css

div > p.some_class{
    color:red;
}

Tất cả những đứa trẻ trực tiếp đi <p>cùng .some_classsẽ có được phong cách áp dụng cho chúng.

— suraj rawat
nguồn

3

(bộ chọn con) đã được giới thiệu trong css2. div p {} chọn tất cả các phần tử p của các phần tử div, trong khi div> p chỉ chọn các phần tử p con, không phải grand grand, grand grand, v.v.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

Để biết thêm thông tin về CSS Ce [người chọn và cách sử dụng chúng, hãy kiểm tra blog của tôi, bộ chọn css và bộ chọn css3

— Avinash Malhotra
nguồn

0

Bộ chọn dấu (>) lớn hơn trong CSS có nghĩa là bộ chọn bên phải là con cháu trực tiếp / con của bất cứ thứ gì ở bên trái.

Một ví dụ:

article > p { }

Có nghĩa là chỉ phong cách một đoạn đi sau một bài viết.

— xác thực
nguồn