Ưu tiên lớp CSS

Question

Tôi có câu hỏi về mức độ ưu tiên của các lớp CSS sau khi gặp sự cố ngày hôm nay. Tình huống như sau:

Tôi có một danh sách không có thứ tự có một lớp được liên kết với nó. Các thẻ LI cũng có một số kiểu được xác định. Tôi muốn thay đổi kiểu dáng của LI giây sau khi nhấp chuột (thông qua lớp "selected" được thêm), nhưng các kiểu của lớp đã thêm sẽ không bao giờ được áp dụng. Đây có phải là hành vi bình thường hay mã này hoạt động không?

CSS:

.dynamicList 
{ 
    list-style: none; 
} 

.dynamicList li 
{ 
    display: block; 
    width: 400px; 
    height: 55px; 
    padding: 10px 10px 10px 10px; 
    border: 1px solid #000; 
    background-color: #ff0000; 
} 

.selectedItem 
{ 
    background-color: #0000ff; 
} 

HTML:

<ul class="dynamicList"> 
    <li>First Item</li> 
    <li class="selectedItem">Second (Selected) Item</li> 
</ul> 

Màu nền của mục danh sách "selected" là không thay đổi. Đây cũng là trường hợp nếu tôi không áp dụng các phong cách để các yếu tố LI, nhưng tạo ra một lớp khác và áp dụng được cho tất cả các mục danh sách để nó đọc ..

<li class="listitem selectedItem">xxxx</li> 

Answer 1

Điều này nghe giống như sự cố CSS specificity. Hãy thử thay đổi .selectedItem ruleset của bạn để:

.dynamicList li.selectedItem { 
    background-color: #0000ff; 
} 

Answer 2

Câu trả lời ngắn gọn là .selectedItem của bạn phong cách không được áp dụng vì kiểu trước đó cụ thể hơn và do đó có mức độ ưu tiên cao hơn. Đây là một decent rundown:

Bây giờ, chúng ta hãy làm một danh sách chung của ưu tiên nội bộ cho CSS (3 có ưu tiên cao nhất ):

element 
.class 
#id 

Đây là thứ tự ưu tiên mặc định. Trong ngoài việc này, tính đặc hiệu sẽ cũng được tính, f.ex ul li sẽ ghi đè li. W3C đã làm một bảng khá hơn làm thế nào bạn nên tính toán nội weight:

LI   {...} /* a=0 b=0 c=1 -> specificity = 1 */ 
UL LI   {...} /* a=0 b=0 c=2 -> specificity = 2 */ 
UL OL LI  {...} /* a=0 b=0 c=3 -> specificity = 3 */ 
LI.red  {...} /* a=0 b=1 c=1 -> specificity = 11 */ 
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */ 
#list   {...} /* a=1 b=0 c=0 -> specificity = 100 */ 

Và đây là W3C specification.

Answer 3

Thay đổi selectedItem quy tắc để:

.dynamicList li.selectedItem 
{ 
    background-color: #0000ff; 
} 

Answer 4

Một bổ sung nhỏ mà đã không được đề cập qua đường bưu điện cletus'.
Theo liên kết W3C, mức độ ưu tiên cao nhất là thuộc tính style được sử dụng trong phần tử/thẻ html.

Ví dụ: nếu bạn có

<a id= bar style="color: red">foo</a> 

và

<style> 
#bar { 
    color: blue; 
} 
</style> 

Màu sẽ red vì phong cách html inline có ưu tiên cao nhất, cao hơn #.