124

Trong một tiêu đề HTML, tôi đã nhận điều này:Trong đó thứ tự CSS stylesheets ghi đè lên?

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

styles.css là tấm trang cụ thể của tôi. master.css là trang tính tôi sử dụng trên mỗi dự án của mình để ghi đè mặc định của trình duyệt. Biểu định kiểu nào trong số các biểu định kiểu này được ưu tiên? Ví dụ: tấm đầu tiên chứa

body { margin:10px; }

Và liên quan biên giới cụ thể, nhưng thứ hai chứa resets của tôi về

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

Về bản chất, hiện các yếu tố tầng của công trình CSS như nhau trong điều khoản tham chiếu kiểu như nó hoạt động trong các hàm CSS điển hình? Có nghĩa là dòng cuối cùng là dòng được hiển thị?

Nguồn

2012-02-27 ian5v

Tôi vừa nhận ra điều này sẽ phù hợp hơn cho Quản trị viên web. Sẽ có một nơi tốt hơn để đăng bài này? – ian5v

Ngay tại đây là tốt. – Blender

'nội dung: không (đầu vào =" nút ")' không phải là một bộ chọn hợp lệ bằng cách này. Bạn có thể muốn chia nó thành 'body, input: not ([type =" button "])'. – BoltClock

130

Các quy tắc cho quy tắc CSS tầng rất phức tạp - hơn là cố gắng diễn giải chúng tồi tệ, tôi sẽ chỉ đơn giản là giới thiệu bạn đến spec:

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

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

Nguồn

2012-02-27 01:42:33 duskwuff

Sau đó, không có quy tắc cụ thể nào trong các bảng định kiểu thứ tự tải? Tôi hiểu cách CSS hiển thị về mặt độ đặc hiệu, nhưng sau đó tôi sẽ giả sử bảng tổng thể của tôi sẽ tải trừ khi bị ghi đè. – ian5v

Tôi * tin rằng * các biểu định kiểu được xử lý như thể chúng được tải theo thứ tự chúng được liên kết trong HTML (ngay cả khi chúng thực sự tải hết thứ tự), nhưng tôi không chắc chắn. – duskwuff

Điều tôi đã đọc trước đó đã đề xuất điều ngược lại, nhưng tôi không thể nói chắc chắn. – ian5v

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 selectors có độ đặc hiệu tương tự, thì decleration 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à hơn cụ thể để các kiểu của nó được sử dụng.

Nguồn

2012-02-27 01:42:53 Blender

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

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

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

Nguồn

2012-02-27 01:43:36 prodigitalson

Đơn đặ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. Hãy xem một cùng tôi làm việc ra: 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ự của .test{}, sau đó bạn sẽ nhìn thấy HTML mất giá trị của tác phẩm mới nhất tuyên bố trong CSS

Nguồn

2013-07-02 11:25:50

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

Hãy cố gắng đơn giản hóa các tầng quy tắc với một ví dụ. Các quy tắc đi cụ thể hơn cho chung.

Áp dụng quy tắc của một trong các ID đầu tiên (trên lớp và/hoặc các yếu tố không phụ thuộc vào thứ tự)
Áp dụng các lớp học trên các yếu tố bất kể thứ tự
Nếu không có lớp học hoặc id, áp dụng những cái chung 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à css phong cách

<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>

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

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

Đây là kết quả trên IE11: (Không đủ quyền để đăng hình ảnh) DARKBLUE: Houston Chronicle News, DarkGreen: Sự phát triển mới nhất trong thành phố của bạn, tím: Houston địa phương Quảng cáo Mục, Đen: Phần Tiếp

Nguồn

2015-07-12 21:13:37

Việc xếp CSS cuối cùng là bậc thầy, mà sẽ ghi đè tất cả css với các thiết lập css cùng

Ví dụ:

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

.210

reset.css

h1 { 
    font-size: 20px; 
}

master.css

h1 { 
    font-size: 30px; 
}

Kết quả cho thẻ h1 sẽ font-size: 30px;

Nguồn

2016-01-09 11:19:00 Doodl

Xin chào. Trong trường hợp của tôi, '.css' được định nghĩa đầu tiên được tải lần cuối. 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? –

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

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

Nguồn

2016-01-14 19:06:40

Nhận xét thú vị nhưng có nhiều nhận xét hơn là câu trả lời ... – AFract

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

tôi nghi ngờ từ câu hỏi của bạn mà bạn có lựa chọn trùng lặp, một tập hợp tổng thể, mà đi cho tất cả các trang, và một tập hợp cụ thể hơn mà bạn muốn ghi đè các giá trị chính cho mỗi trang riêng lẻ. Nếu đúng như vậy, thì lệnh của bạn là chính xác. Master được nạp đầu tiên 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 số). 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-inheritance-cascaade/ Khi tôi bắt đầu với phát triển giao diện người dùng, trang này đã xóa rất nhiều câu hỏi.

Nguồn

2016-11-30 13:11:41 user3094826

Vâng, nó hoạt động giống như thể chúng là trong một tờ, tuy nhiên: Các vấn đề

tải theo thứ tự!

<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ì bảo đảm rằng master.css sẽ được tải sau khi styles.css. Do đó, nếu master.css được tải nhanh chóng và styles.css mất một khoảng thời gian, styles.css sẽ trở thành biểu định kiểu thứ hai và mọi quy tắc có cùng đặc trưng từ master.css sẽ bị ghi đè.

Tốt nhất nên đặ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.

Nguồn

2018-01-23 07:58:45

Trong đó thứ tự CSS stylesheets ghi đè lên?

Trả lời

tải theo thứ tự!

Các vấn đề liên quan