Khi ta áp dụng CSS cho một element trong file HTML thì điều đầu tiên chúng ta cần quan tâm đó là thứ tự ưu tiên của CSS vì có những lúc ta viết CSS đúng hết nhưng khi ra chạy file HTML thì lại không thấy kết quả gì cả, đó là vì CSS mà chúng ta đang viết nó không được áp dụng mà nó lại được áp dụng bởi một CSS khác.
Chúng ta hãy xem qua đoạn code sau
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
ul#menu li a:link,
ul#menu li a:visited{color:#999;}
ul#menu li.Active a:link,
ul#menu li.Active a:visited{color:#ff0000;}
ul#menu li a:hover{color:#ccc;}
ul#menu li ul li a:hover{color:#000}
</style>
</head>
<body>
<ul id=”menu”>
<li><a href=”#” title=”Parent”>Parent</a>
<ul>
<li><a href=”#” title=”Child”>Child</a></li>
</ul>
</li>
</ul>
</body>
</html>
Trước khi các bạn chạy file này trên trình duyệt chúng ta hãy thử nghĩ xem khi ta mouseover lên “Child” thì nó sẽ có mảu gì? Có ai nghĩ nó là màu đen không? Lúc trước mình cũng nghĩ nó là màu đen, nhưng khi chạy file này thực tế thì nó lại cho mình màu đỏ ban đầu không hề thay đổi.
Vậy thì sao lại thế nhỉ?
CSS có một cách tính thứ tự ưu tiên như sau:
class …………………………………………………………có giá trị là 10
id……………………………………………………………..có giá trị là 100
inline style………………………………………………….có giá trị là 1000
Bây giờ ta thử áp dụng để tính giá tri của CSS trên nhé.
ul#menu li ul li a:hover{color:#000} có giá trị 1(ul) + 100(#menu) + 1(li) + 1(ul) + 1(li) + 1(a:hover) = 105
Còn:
ul#menu li.Active a:link có giá trị 1(ul) + 100(#menu) + 1(li) + 10(.Active) + 1(a:hover) = 113
Vậy 113>105 nên CSS bên dưới sẽ được áp dụng .
Nếu chúng ta muốn khi mousever lên Child có màu vàng thì ta chỉ cần viết:
ul#menu li.Active a:hover{color:#fff000;}
em thay trang web em viet dung css ma chua em chang biet thu tu cua tung the trong css co ai biet bay em voi