Tôi đang gặp một số vấn đề với CSS "phân cấp" (không chắc chắn nếu nó là đúng để gọi nó là một hệ thống phân cấp). Tôi đang cố gắng tạo kiểu HTML dưới đây.Tại sao thuộc tính CSS của tôi bị ghi đè/bỏ qua?
<body>
<section id="content">
<article>
<ul class="posts-list">
<li class="post-item">
<h2>[post title]</h2>
<p class="item-description">...</p>
<p class="item-meta">...</p>
</li>
...
</ul>
</article>
</section>
</body>
Vì phần nội dung thay đổi trên mỗi trang tôi có, tôi muốn duy trì phong cách nhất quán trên tất cả chúng, vì vậy tôi đã viết một số quy tắc CSS "toàn cầu".
#content {
color: #000;
margin-left: 300px;
max-width: 620px;
padding: 0px 10px;
position: relative;
}
#content p,
#content li {
color: #111;
font: 16px/24px serif;
}
Tôi muốn tạo kiểu HTML trong một số ul.posts-list khác nhau, vì vậy tôi đã viết các quy tắc này.
li.post-item > * {
margin: 0px;
}
.item-description {
color: #FFF;
}
.item-meta {
color: #666;
}
Tuy nhiên, tôi gặp phải một số vấn đề. Đây là cách mà Chrome đang render CSS:
Đối với một số lý do, các quy tắc #content p, #content li được trọng quy tắc của tôi cho .item-description và .item-meta. Ấn tượng của tôi là tên lớp/id được coi là cụ thể và do đó ưu tiên cao hơn. Tuy nhiên, có vẻ như tôi có một sự hiểu lầm về cách CSS hoạt động. Tôi làm gì sai ở đây?
Chỉnh sửa: Ngoài ra, tôi có thể đọc thêm về cách phân cấp này hoạt động như thế nào?
+ 1'd cho mã, nhưng một vài liên kết không thể làm tổn thương! [đặc tả chính thức về tính đặc hiệu] (http://www.w3.org/TR/CSS21/cascade.html#specificity) và [tờ báo thân thiện] [http://www.stuffandnonsense.co.uk/archives/images/ specificitywars-05v2.jpg) – benesch
+1 cho bảng cheat thân thiện hoặc "cách giải thích đặc tính css cho một geek"! Xuất sắc! – tibo