CSS - Cú pháp để chọn lớp trong id

Cú pháp chọn để chọn thẻ trong id thông qua tên lớp là gì? Ví dụ, tôi cần phải chọn những gì dưới đây để làm cho "li" bên trong chuyển sang màu đỏ?CSS - Cú pháp để chọn lớp trong id

<html> 
<head> 
    <style type="text/css"> 
     #navigation li 
     { 
      color: green; 
     } 

     #navigation li .navigationLevel2 
     { 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    <ul id="navigation"> 
     <li>Level 1 item 
      <ul class="navigationLevel2"> 
       <li>Level 2 item</li> 
      </ul> 
     </li> 
    </ul> 
</body> 
</html>

Nguồn

2009-07-16 Jeremy

#navigation .navigationLevel2 li 
{ 
    color: #f00; 
}

Nguồn

2009-07-16 22:25:12

có bộ chọn không cần thiết! – Galen

tôi có nghĩa là không cần thiết! – Galen

Chỉ khi ví dụ được hiển thị là tất cả đánh dấu. Đối với tất cả các bạn biết, đánh dấu cần thiết là phức tạp hơn. Tôi dựa trên câu trả lời của tôi ra khỏi thông tin được đưa ra. –

.navigationLevel2 li { color: #aa0000 }

Nguồn

2009-07-16 22:24:39 Galen

NẾU điều này thực hiện thủ thuật mà không áp dụng nó vào li không mong muốn, thì đây là cách để đi vì nó có ít bộ chọn hơn và do đó sẽ nhanh hơn. Ít nhất theo lời khuyên về hiệu suất trang của Google. – PatrikAkerstrand

Dưới đây là hai lựa chọn. Tôi thích những tùy chọn navigationAlt vì nó liên quan đến ít công việc cuối cùng:

<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    #navigation li { 
 
     color: green; 
 
    } 
 
    #navigation li .navigationLevel2 { 
 
     color: red; 
 
    } 
 
    #navigationAlt { 
 
     color: green; 
 
    } 
 
    #navigationAlt ul { 
 
     color: red; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul id="navigation"> 
 
    <li>Level 1 item 
 
     <ul> 
 
     <li class="navigationLevel2">Level 2 item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul id="navigationAlt"> 
 
    <li>Level 1 item 
 
     <ul> 
 
     <li>Level 2 item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

Nguồn

2009-07-16 22:30:43 Jason

Điều này cũng sẽ làm việc và bạn không cần học thêm:

#navigation li li {}

Nếu bạn có một mức độ thứ ba của LI bạn có thể phải thiết lập lại/ghi đè lên một số phong cách mà họ sẽ kế thừa từ bộ chọn ở trên. Bạn có thể nhắm mục tiêu cấp độ thứ ba như vậy:

#navigation li li li {}

Nguồn

2009-07-16 22:39:50

CSS - Cú pháp để chọn lớp trong id

Trả lời

Các vấn đề liên quan