Thứ tự ưu tiên cho CSS là gì?

Tôi đang cố gắng tìm ra lý do tại sao một trong các lớp css của tôi dường như ghi đè lên lớp kia (chứ không phải ngược lại)

Ở đây tôi có hai lớp css

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

và theo quan điểm của tôi, tôi gọi

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

Phông chữ (Phần tử chồng chéo) hiển thị là 10px thay vì 20 - ai đó có thể giải thích tại sao lại như vậy không?

Có một số quy tắc (áp dụng theo thứ tự này):

1. css nội tuyến (thuộc tính kiểu html) ghi đè các quy tắc css trong thẻ kiểu và tệp css
2. một bộ chọn cụ thể hơn được ưu tiên hơn một bộ chọn ít cụ thể hơn
3. các quy tắc xuất hiện sau trong mã sẽ ghi đè các quy tắc trước đó nếu cả hai đều có cùng tính cụ thể.
4. Quy tắc css với !importantluôn được ưu tiên.

Trong trường hợp của bạn, quy tắc 3 của nó được áp dụng.

Tính cụ thể cho các bộ chọn đơn từ cao nhất đến thấp nhất:

• id (ví dụ: #mainselect <div id="main">)
• lớp (ví dụ .myclass:), bộ chọn thuộc tính (ví dụ [href=^https:]:) và lớp giả (ví dụ :hover:)
• phần tử (ví dụ div:) và phần tử giả (ví dụ ::before:)

Để so sánh tính đặc hiệu của hai bộ chọn kết hợp, hãy so sánh số lần xuất hiện của các bộ chọn đơn của mỗi nhóm tính cụ thể ở trên.

Ví dụ: so sánh #nav ul li a:hovervới#nav ul li.active a::after

• đếm số bộ chọn id: có một bộ chọn cho mỗi ( #nav)
• đếm số bộ chọn lớp: có một bộ cho mỗi ( :hovervà .active)
• đếm số bộ chọn phần tử: có 3 ( ul li a) cho bộ đầu tiên và 4 cho bộ chọn thứ hai ( ul li a ::after), do đó bộ chọn kết hợp thứ hai cụ thể hơn.

Một bài báo hay về tính cụ thể của bộ chọn css .

Dưới đây là tổng hợp thứ tự tạo kiểu CSS trong một sơ đồ, trên đó các quy tắc CSS có mức độ ưu tiên cao hơn và được ưu tiên hơn phần còn lại:

Tuyên bố từ chối trách nhiệm : Nhóm của tôi và tôi đã cùng nhau thực hiện phần này bằng một bài đăng trên blog ( https://vecta.io/blog/definitive-guide-to-css-styling-order ) mà tôi nghĩ sẽ hữu ích cho tất cả front-end các nhà phát triển.

Những gì chúng ta đang xem ở đây được gọi là tính cụ thể như Mozilla đã nêu :

Tính cụ thể là phương tiện mà trình duyệt quyết định giá trị thuộc tính CSS nào phù hợp nhất với một phần tử và do đó, sẽ được áp dụng. Tính cụ thể dựa trên các quy tắc đối sánh bao gồm các loại bộ chọn CSS khác nhau.

Tính cụ thể là trọng số được áp dụng cho một khai báo CSS nhất định, được xác định bởi số lượng của từng loại bộ chọn trong bộ chọn phù hợp. Khi nhiều khai báo có tính cụ thể như nhau, khai báo cuối cùng được tìm thấy trong CSS sẽ được áp dụng cho phần tử. Tính cụ thể chỉ áp dụng khi cùng một phần tử được nhắm mục tiêu bởi nhiều khai báo. Theo quy tắc CSS, các phần tử được nhắm mục tiêu trực tiếp sẽ luôn được ưu tiên hơn các quy tắc mà một phần tử kế thừa từ tổ tiên của nó.

Tôi thích lời giải thích 0-0-0 tại https://specifishity.com :

Khá mô tả bức tranh của !importantchỉ thị! Nhưng đôi khi đó là cách duy nhất để ghi đè stylethuộc tính nội tuyến . Vì vậy, cách tốt nhất là cố gắng tránh cả hai.

Trước hết, dựa trên @extendchỉ thị của bạn , có vẻ như bạn không sử dụng CSS thuần túy, mà là một bộ xử lý trước như SASS os Stylus.

Bây giờ, khi chúng ta nói về "thứ tự ưu tiên" trong CSS, có một quy tắc chung liên quan: bất kỳ quy tắc nào được đặt sau các quy tắc khác (theo kiểu từ trên xuống) đều được áp dụng. Trong trường hợp của bạn, chỉ cần chỉ định .smallboxsau.smallbox-paysummary bạn sẽ có thể thay đổi mức độ ưu tiên của các quy tắc của mình.

Tuy nhiên, nếu bạn muốn đi xa hơn một chút, tôi đề xuất bài đọc này: Đặc tả W3C xếp tầng CSS . Bạn sẽ thấy rằng mức độ ưu tiên của một quy tắc dựa trên:

1. Loại phương tiện hiện tại;
2. Tầm quan trọng;
3. Gốc;
4. Tính cụ thể của bộ chọn và cuối cùng là quy tắc nổi tiếng của chúng tôi:
5. Cái nào sau này được chỉ định.

AS là trạng thái trong W3: W3 Cascade CSS

orden mà bảng kiểu khác nhau được áp dụng như sau (trích dẫn từ phần xếp tầng W3):

1. khai báo tác nhân người dùng

2. khai báo bình thường của người dùng

3. tác giả tuyên bố bình thường

4. tác giả những tuyên bố quan trọng

5. khai báo quan trọng của người dùng

Thông tin thêm về điều này trong tài liệu W3 được giới thiệu

Thứ tự mà các lớp xuất hiện trong phần tử html không quan trọng, số lượng là thứ tự mà các khối xuất hiện trong biểu định kiểu.

Trong trường hợp của bạn .smallbox-paysummaryđược xác định sau .smallboxdo đó ưu tiên 10px.

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

Css nội tuyến (thuộc tính kiểu html) ghi đè các quy tắc css trong thẻ kiểu và tệp css

Bộ chọn cụ thể hơn được ưu tiên hơn bộ chọn ít cụ thể hơn.

Các quy tắc xuất hiện sau trong mã sẽ ghi đè các quy tắc trước đó nếu cả hai đều có cùng tính cụ thể.

Cũng cần lưu ý rằng khi bạn có hai kiểu trên một phần tử HTML với mức độ ưu tiên ngang nhau, trình duyệt sẽ ưu tiên những kiểu được ghi vào DOM sau cùng ... vì vậy nếu trong DOM:

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... chiều rộng của div sẽ là 50px