Theo thứ tự các biểu định kiểu CSS ghi đè?

157

Trong tiêu đề HTML, tôi đã nhận được điều này:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.csslà trang dành riêng cho trang của tôi. master.csslà một tờ tôi sử dụng cho mỗi dự án của mình để ghi đè mặc định của trình duyệt. Những kiểu định dạng nào được ưu tiên? Ví dụ: tờ đầu tiên chứa cụ thể

body { margin:10px; }

Và các đường viền liên quan, nhưng cái thứ hai chứa các thiết lập lại của tôi về

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

Về bản chất, phần tử xếp tầng của CSS có hoạt động giống nhau về các tham chiếu biểu định kiểu như trong các hàm CSS thông thường không? Có nghĩa là dòng cuối cùng là dòng được hiển thị?

css overriding stylesheet

— ian5v
nguồn

Bây giờ tôi mới nhận ra điều này sẽ phù hợp hơn với Webmaster. Sẽ có một nơi tốt hơn để đăng này?

— ian5v

10

Ngay đây là tốt.

— Máy xay sinh tố

4

body:not(input="button")bằng cách này không phải là một bộ chọn hợp lệ. Bạn có thể có nghĩa là để chia nó thành body, input:not([type="button"]).

— BoltClock

Nó thật thú vị. Tôi không tin rằng tôi đã thấy cú pháp như vậy trước đây. Tôi vẫn còn mới, nhưng những dấu ngoặc kép đó là xa lạ với tôi.

— ian5v

các dấu ngoặc này dành cho các bộ chọn thuộc tính: developer.mozilla.org/en-US/docs/Web/CSS/Attribution_selector @topic: có lẽ bạn muốn chuyển đổi thứ tự của các bảng định kiểu: Chung của bạn master.cssnên tải trước, sau đó sẽ dễ dàng hơn để ghi đè các phong cách tổng thể trong của bạn styles.css.

— grilly

163

Các quy tắc xếp tầng quy tắc CSS rất phức tạp - thay vì cố gắng diễn giải chúng một cách tồi tệ, tôi sẽ chỉ giới thiệu bạn đến thông số kỹ thuật:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Tóm lại: quy tắc cụ thể hơn ghi đè những quy tắc chung hơn. Tính đặc hiệu được xác định dựa trên số lượng ID, lớp và tên thành phần có liên quan, cũng như việc !importantkhai báo có được sử dụng hay không. Khi tồn tại nhiều quy tắc của cùng một "mức độ đặc hiệu", bất kỳ quy tắc nào xuất hiện cuối cùng sẽ giành chiến thắng.

— duskwuff -inactive-
nguồn

1

Sau đó, không có quy tắc cụ thể nào theo thứ tự các bảng định kiểu tải? Tôi hiểu cách CSS hiển thị theo độ đặc hiệu, nhưng sau đó tôi sẽ cho rằng trang chủ của mình sẽ tải trừ khi bị ghi đè.

— ian5v

11

Trên thực tế, !importanttham gia trực tiếp vào dòng thác, và không liên quan gì đến tính đặc hiệu. Tính đặc hiệu có liên quan đến bộ chọn, trong khi !importantđược sử dụng với khai báo thuộc tính. (Vì vậy, bạn đã đúng khi nói rằng các quy tắc rất phức tạp !;)

— BoltClock

2

Vì vậy, các bảng định kiểu tải cùng một cách với các phần tử, ưu tiên cuối cùng nếu chúng có cùng tính đặc hiệu?

— ian5v

3

@iananananan: Về cơ bản, trình duyệt không bao giờ thấy CSS về các biểu định kiểu riêng lẻ. Nếu có nhiều biểu định kiểu, tất cả chúng đều được xử lý như thể chúng là một biểu định kiểu khổng lồ và các quy tắc được đánh giá tương ứng.

— BoltClock

2

@ user34660 Nhận xét của BoltClock là từ quan điểm của phong cách CSS. Bạn đã đúng rằng các bảng định kiểu được giữ riêng biệt trong DOM, nhưng việc phân tách đó không ảnh hưởng đến cách các kiểu đó được áp dụng cho mọi thứ.

— duskwuff -inactive-

31

Phong cách cụ thể nhất được áp dụng:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

Nếu tất cả các bộ chọn có cùng độ đặc hiệu, thì bộ giải mã gần đây nhất được sử dụng:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

Trong trường hợp của bạn, body:not([input="button"])là cụ thể hơn để phong cách của nó được sử dụng.

— Máy xay
nguồn

1

Xem bình luận của tôi về câu hỏi liên quan đến bộ chọn cuối cùng đó.

— BoltClock

1

Quy tắc cụ thể làm cho mọi thứ khó khăn hơn khi chúng ta cần ghi đè lên biểu định kiểu không thể chỉnh sửa!

— Ari

23

Đặt hàng không thành vấn đề. Giá trị khai báo cuối cùng của nhiều lần xuất hiện sẽ được thực hiện. Xin vui lòng xem cùng một cái tôi đã làm việc: http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

Nếu bạn trao đổi thứ tự .test{}, thì bạn có thể thấy HTML lấy giá trị của cái cuối cùng được khai báo trong CSS

— Roy MJ
nguồn

3

Vì vậy, bạn nên thêm CSS cụ thể nhất cuối cùng.

— sống tình yêu

17

CSS tải cuối cùng là MASTER, sẽ ghi đè tất cả css với cùng cài đặt css

Thí dụ:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

Đầu ra cho thẻ h1 sẽ có kích thước phông chữ: 30px;

— Doodl
nguồn

1

Chào. Trong trường hợp của tôi, định nghĩa đầu tiên được .csstải sau cùng. Chúng được áp dụng theo thứ tự chúng được tải hoặc theo thứ tự chúng được xác định?

— Eugen Konkov

Cảm ơn, đây chính xác là lời giải thích mà tôi đang tìm kiếm.

— HunterTheGatherer

7

Hãy thử đơn giản hóa quy tắc xếp tầng bằng một ví dụ. Các quy tắc đi cụ thể hơn để chung.

Áp dụng quy tắc của ID trước tiên (trên lớp và / hoặc các thành phần bất kể thứ tự)
Áp dụng các lớp trên các phần tử bất kể thứ tự
Nếu không có lớp hoặc id, áp dụng những cái chung
Áp dụng kiểu cuối cùng theo thứ tự (thứ tự khai báo dựa trên thứ tự tải tệp) cho cùng một nhóm / cấp.

Đây là mã css và html;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

Đây là phong cách css

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

Đây là kết quả. Bất kể thứ tự của tệp kiểu hoặc khai báo kiểu, id="important"áp dụng ở cuối (lưu ý class="deadline"khai báo cuối cùng nhưng không có hiệu lực).

Phần <article>tử chứa <aside>phần tử, tuy nhiên kiểu khai báo cuối cùng sẽ có hiệu lực, trong trường hợp này là article h2 { .. } phần tử h2 thứ ba.

Đây là kết quả trên IE11: (Không đủ quyền để đăng ảnh) DarkBlue: Houston Chronicle News, DarkGreen: Những phát triển mới nhất trong thành phố của bạn, Purple: Phần quảng cáo địa phương Houston, Đen: Phần tiếp theo

— Agan Kagun
nguồn

6

Nó phụ thuộc vào cả thứ tự tải và tính đặc hiệu của các quy tắc thực tế được áp dụng cho từng kiểu. Đưa ra bối cảnh câu hỏi của bạn mà bạn muốn tải thiết lập lại chung trước, sau đó là trang cụ thể. Sau đó, nếu bạn vẫn không thấy hiệu ứng dự định, bạn cần xem xét tính cụ thể của các công cụ chọn có liên quan như những người khác đã chỉ ra.

— prodigitalson
nguồn

2

EDIT: Tháng 4 năm 2020, theo nhận xét của @ LeeC, đây không còn là trường hợp nữa

Vâng, nó hoạt động giống như khi chúng ở trong một tờ, tuy nhiên:

Tải các vấn đề đặt hàng!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

Trong đoạn mã trên, không có gì đảm bảo master.csssẽ tải sau styles.css. Do đó, nếu master.cssđược tải nhanh và styles.cssmất một thời gian, styles.csssẽ trở thành biểu định kiểu thứ hai và bất kỳ quy tắc nào có cùng tính đặc hiệu master.csssẽ được ghi đè.

Tốt nhất là đặt tất cả các quy tắc của bạn vào một trang tính (và rút gọn) trước khi triển khai.

— n_i_c_k
nguồn

Xem xét trường hợp cho các biểu định kiểu gần như nhận dạng thay thế được tải từ phần <head> của trang, một trang có chứa các thuộc tính phương tiện có điều kiện để tải một biểu định kiểu cụ thể cho điện thoại thông minh và máy tính bảng. Trong trường hợp này, logic được chỉ định trong phương tiện phải hoàn toàn độc quyền cho mỗi biểu định kiểu nếu thứ tự tải không xác định.

— Lindsay Haisley

@n_i_c_k Câu trả lời của bạn không chính xác. Thứ tự khai báo là những gì quan trọng, không phải là thứ tự tải . Tôi vừa thử nghiệm điều này với Fiddler, bằng cách tạm dừng tải xuống master.cssvà cho phép styles.csstải đầy đủ. Sau đó, tôi cho phép master.csstải. Kiểu "chồng lấp" từ master.cssvẫn được áp dụng - và kết xuất bị chặn cho đến khi được master.csstải và được phân tích cú pháp. Lưu ý : Tôi đã thử rel=preloadtrên master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above style.css`.

— LeeC

Cảm ơn @LeeC, tôi biết tại thời điểm viết câu trả lời của mình là chính xác, nhưng tôi sẽ nói với bạn rằng nó đã được sửa bây giờ và chỉnh sửa câu trả lời của tôi.

— n_i_c_k

1

Cách tốt nhất là sử dụng các lớp càng nhiều càng tốt. Tránh bộ chọn ID (#) nào. Khi bạn viết các bộ chọn chỉ với các lớp duy nhất, kế thừa CSS sẽ dễ theo dõi hơn.

Cập nhật: Đọc thêm về tính đặc hiệu của CSS trong bài viết này: https://css-tricks.com/specifics-on-css-specificity/

— Ô mai Jeroen
nguồn

1

Đây là một bài viết tuyệt vời về tính đặc hiệu của CSS: css-tricks.com/specifics-on-css-specificity

— Jeroen Ooms

0

Tôi nghi ngờ từ câu hỏi của bạn rằng bạn có các lựa chọn trùng lặp, một bộ chính, dành cho tất cả các trang và một bộ cụ thể hơn mà bạn muốn ghi đè các giá trị chính cho từng trang riêng lẻ. Nếu đó là trường hợp, sau đó đặt hàng của bạn là chính xác. Master được tải trước và các quy tắc trong tệp tiếp theo sẽ được ưu tiên (nếu chúng giống hệt nhau hoặc có cùng trọng lượng). Có một mô tả rất được khuyến nghị về tất cả các quy tắc tại trang web này http://vanseodesign.com/css/css-specificity-inherribution-cascaade/ Khi tôi bắt đầu phát triển giao diện người dùng, trang này đã xóa rất nhiều câu hỏi.

— người dùng3094826
nguồn

0

Đó là tầng xác định quyền ưu tiên của khai báo. Tôi có thể đề nghị các đặc điểm kỹ thuật chính thức; phần này của nó là dễ đọc.

https://www.w3.org/TR/css-cascade-3/#cascading

Những điều sau đây có ảnh hưởng đến việc sắp xếp, theo thứ tự ưu tiên giảm dần.

Một sự kết hợp của nguồn gốc và tầm quan trọng:
1. Transition tờ khai
2. Khai báo của tác nhân người dùng được đánh dấu bằng !important
3. Tuyên bố của người dùng được đánh dấu bằng !important
4. Tuyên bố của tác giả trang được đánh dấu bằng !important
  1. Định nghĩa về phần tử với stylethuộc tính
  2. Định nghĩa toàn tài liệu
5. Animation tờ khai
6. Trang khai của tác giả
  1. Định nghĩa về phần tử với stylethuộc tính
  2. Định nghĩa toàn tài liệu
7. Khai báo của người dùng
8. Khai báo của đại lý người dùng
Nếu hai khai báo có cùng nguồn gốc và tầm quan trọng, thì độ đặc hiệu, nghĩa là mức độ rõ ràng của yếu tố được xác định, đi vào hoạt động, tính toán một điểm.
- 100 điểm cho mỗi định danh ( #x34y)
- 10 điểm cho mỗi lớp ( .level)
- 1 điểm cho mọi loại phần tử ( li)
- 1 điểm cho mỗi phần tử giả ( :hover) không bao gồm:not
Ví dụ: bộ chọn main li + .red.red:not(:active) p > *có độ đặc hiệu là 24.
Thứ tự xuất hiện chỉ đóng một vai trò nếu hai định nghĩa có cùng nguồn gốc, tầm quan trọng và tính đặc hiệu. Các định nghĩa sau này đi trước các định nghĩa trước đó trong tài liệu (bao gồm cả nhập khẩu).

— Michael Schmid
nguồn

0

Tôi tin rằng khi thực thi mã, nó được đọc từ trên xuống dưới, có nghĩa là liên kết CSS cuối cùng sẽ ghi đè các kiểu tương tự trong bất kỳ biểu định kiểu nào phía trên nó.

Ví dụ: nếu bạn đã tạo hai biểu định kiểu

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

và trong cả hai điều này, bạn đặt màu nền của cơ thể thành hai màu khác nhau - màu của cơ thể trong style2.css sẽ được ưu tiên.

Bạn có thể tránh vấn đề ưu tiên kiểu dáng bằng cách sử dụng !IMPORTANTbên trong kiểu lớp bạn muốn ưu tiên hoặc có thể sắp xếp lại <link>thứ tự của bạn .

— Ennam Hoque
nguồn