2012-02-28 79 views
24

thể trùng lặp:
What does “>” mean in CSS rules?">" có nghĩa là gì trong CSS?

không biểu tượng > có ý nghĩa gì trong CSS? Tôi nhận thấy nó trong chủ đề blog Wordpress của tôi và muốn biết nó đang làm gì.

#access li:hover > a, 
#access ul ul :hover > a, 
#access a:focus { 
    background: #efefef; 
} 
#access li:hover > a, 
#access a:focus { 
    background: #f9f9f9; /* Show a solid color for older browsers */ 
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5); 
    background: -o-linear-gradient(#f9f9f9, #e5e5e5); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */ 
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); 
    color: #373737; 
} 
#access ul li:hover > ul { 
    display: block; 
} 

Trả lời

40

nó có nghĩa là chỉ "đầu tiên lồng nhau" yếu tố sẽ được nhắm mục tiêu ("con" yếu tố), ví dụ

<div id="a"> 
     <div id="b"> 
     <div id="c"> 
     </div> 
     </div> 
    </div> 

nếu bạn viết

#a div{ 
background: red; 
} 

sau đó cả hai # b và #c sẽ có màu đỏ, nhưng nếu bạn sử dụng> như

#a > div{ 
background: red; 
} 

thì chỉ #b sẽ có màu đỏ, #c sẽ không.

+0

Tôi nghĩ câu trả lời của bạn sẽ hữu ích hơn nếu bạn thêm một 'div' khác với' id = d' trong 'id = a'' div' thành * hiển thị tất cả các phần tử 'child' sẽ được chọn. :) –

12

Đó là bộ chọn con (còn được gọi là bộ kết hợp con). Bạn có thể tìm hiểu thêm về bộ chọn trên trang web của Tổ chức World Wide Web Consortium (W3C), nơi bạn có thể đọc số CSS2 entry on the child selector hoặc bạn có thể chuyển thẳng đến CSS3 entry on the child selector.

Ngoài ra, đây là một câu nói từ một SO câu hỏi về CSS Child vs Descendant selectors:

Chỉ cần nghĩ về những gì dòng chữ "con" và "hậu duệ" có nghĩa là bằng tiếng Anh:

  • Con gái tôi là cả con tôi và hậu duệ của tôi

  • Cháu gái của tôi không phải là con của tôi, nhưng cô ấy là hậu duệ của tôi.

+0

Đặc tả bộ chọn CSS2 đã được thay thế bằng thông số CSS3 vì bây giờ nó là một Khuyến nghị (cũng có URL khá thú vị): http://www.w3.org/TR/selectors – BoltClock

+0

@BoltClock Điểm tốt. –

3

li > a khớp với bất kỳ phần tử nào là con của li. Xem W3C CSS page cho bất kỳ bộ chọn nào.