CSS không quan trọng thứ tự của các lớp

Vì trình duyệt chỉ có thể chọn một màu để áp dụng cho đoạn này, nên nó sẽ phải quyết định quy tắc CSS nào sẽ được ưu tiên hơn các quy tắc khác. Đây là mức độ ưu tiên của CSS (hoặc tính đặc hiệu của CSS)

Trong ví dụ của chúng tôi, đoạn văn sẽ có màu đỏ vì bộ chọn #id cụ thể hơn và do đó quan trọng hơn các bộ chọn khác

Thứ tự các quy tắc CSS

Nếu các bộ chọn tương tự nằm trong CSS của bạn, thì bộ chọn cuối cùng được xác định sẽ được ưu tiên

p{ color: green;}
p{ color: red;}
/* Paragraphs will be red */

thước đo 100

Một cách nhanh chóng để tìm ra mức độ “mạnh mẽ” của quy tắc CSS là bằng cách đo tính đặc hiệu của bộ chọn

• Bộ chọn #id có giá trị 100
• Bộ chọn .class có giá trị 10

• p{ color: blue;}

  0 bộ chọn có giá trị 1

Bộ chọn có “điểm số” cao nhất sẽ chiếm ưu thế, bất kể thứ tự xuất hiện của các quy tắc CSS

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

<p class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.
</p>

MarkSheet là một hướng dẫn HTML và CSS miễn phí

Quy tắc

p{ color: blue;}

p{ color: blue;}

p{ color: blue;}

p{ color: blue;}

Làm thế nào để tránh xung đột

Trong khi viết CSS của bạn, thật dễ dàng để viết các quy tắc xung đột, trong đó cùng một thuộc tính được áp dụng nhiều lần

Việc hầu hết mọi người không hiểu đúng điều này là một thất bại trong cách chúng tôi dạy phát triển web. Tim Kadlec đã tóm tắt nó như thế này

Từ những kết quả này, rõ ràng là chúng tôi chưa làm đủ tốt công việc thảo luận và giảng dạy những khái niệm cơ bản này. Đó là lỗi của chúng tôi - những người trong chúng tôi đã học những chủ đề này - vì đã không truyền tải thông tin đó một cách hiệu quả.

Tôi nhớ mình đã hoàn toàn bối rối trước dòng thác trong một khoảng thời gian dài khi tôi bắt đầu học phát triển web

Cuối cùng khi tôi biết cách nó hoạt động, tôi cảm thấy mình giống như Neo trong Ma trận khi anh ấy đột nhiên có thể nhìn thế giới bằng 0 và 1. Phát triển web trở nên dễ dàng hơn. Gỡ lỗi trở nên dễ dàng hơn. Mã của tôi trở nên tốt hơn vô cùng

Vì vậy, hãy ghi nhớ những lời của Tim, hôm nay chúng ta hãy xem nhanh bản chất xếp tầng của CSS (còn gọi là Biểu định kiểu xếp tầng)

Cascade trong CSS hoạt động như thế nào

Quy tắc quan trọng nhất của thác. tất cả những thứ khác đều như nhau, kiểu được xác định cuối cùng là kiểu được sử dụng

Giả sử biểu định kiểu của bạn trông như thế này

________số 8_______

Đoạn văn

<div class="red blue">
<div class="blue red">

<div class="red blue">
<div class="blue red">

p {
	color: red;
}

p {
	color: purple;
}

p {
	color: blue;
}

Bây giờ, các đoạn văn của bạn sẽ luôn là

<div class="red blue">
<div class="blue red">

Thứ tự của các lớp trên một phần tử không quan trọng

Quy tắc “chiến thắng cuối cùng” chỉ áp dụng cho thứ tự các kiểu trong biểu định kiểu của bạn, không áp dụng cho chính các thành phần đó. Đây là điều khiến rất nhiều người vấp ngã trong bài kiểm tra của Max

Với hai lớp này

.red {
	color: red;
}

.blue {
	color: blue;
}

Nếu cả hai lớp

<div class="red blue">
<div class="blue red">

<div class="red blue">
<div class="blue red">

<div class="red blue">
<div class="blue red">

<div class="red blue">
<div class="blue red">

<div class="red blue">
<div class="blue red">

<div class="red blue">
<div class="blue red">

p {
	color: red;
}

p {
	color: blue;
}

p {
	color: purple;
}

<div class="red blue">My text is blue.</div>
<div class="blue red">My text is blue, too.</div>

Bản chất "xếp tầng" của biểu định kiểu

“Xếp tầng” cũng có nghĩa là trừ khi được ghi đè cụ thể, các kiểu sẽ “xếp tầng” biểu định kiểu nếu nhiều kiểu được khai báo trên một phần tử hoặc lớp

Đây là một ví dụ/bản trình diễn về điều này đang hoạt động

p {
	color: red;
	font-weight: bold;
	size: 2em;
}

.blue {
	color: blue;
}

p {
	font-style: italic;
}

<p>I'm red, bold, and italic.</p>
<p class="blue">I'm all of those things, and also blue.</p>

Trong ví dụ này, khai báo

p {
	color: red;
}

p {
	color: blue;
}

p {
	color: purple;
}

p {
	color: red;
}

p {
	color: blue;
}

p {
	color: purple;
}

p {
	color: red;
}

p {
	color: blue;
}

p {
	color: purple;
}

p {
	color: red;
}

p {
	color: blue;
}

p {
	color: purple;
}

Ví dụ: nếu bạn muốn xóa

p {
	color: red;
}

p {
	color: blue;
}

p {
	color: purple;
}

p {
	font-weight: normal;
}

Tính đặc hiệu hoạt động như thế nào

Hãy nhớ quy tắc quan trọng nhất của thác?

Tất cả những thứ khác đều như nhau, kiểu được xác định cuối cùng là kiểu được sử dụng

Phần “tất cả những thứ khác đều bình đẳng” cũng khá quan trọng

Chọn tính đặc hiệu có nghĩa là “bộ chọn cho kiểu này cụ thể như thế nào. ” Bộ chọn cụ thể hơn (tức là. cụ thể hơn), được ưu tiên hơn các kiểu bộ chọn ít cụ thể hơn, ngay cả khi chúng xuất hiện sau trong biểu định kiểu

Điều này có thể trở nên kỳ lạ và phức tạp, nhưng có một số quy tắc chung giúp bạn dễ nhớ hơn

• Các lớp cụ thể hơn các bộ chọn phần tử
• ID cụ thể hơn các lớp
• Bộ chọn kết hợp cụ thể hơn bộ chọn đơn
• Kiểu nội tuyến cụ thể hơn nội dung trong biểu định kiểu

Đây là một ví dụ/demo

p {
	color: red;
}

.override.orange {
	color: orange;
}

.blue {
	color: blue;
}

#purple {
	color: rebeccapurple;
}

<div class="red blue">
<div class="blue red">

Thế còn p { color: red; } p { color: purple; } p { color: blue; }0

Quy tắc

p {
	color: red;
}

p {
	color: purple;
}

p {
	color: blue;
}

<div class="red blue">
<div class="blue red">

<div class="red blue">
<div class="blue red">

Bạn hầu như không bao giờ nên sử dụng nó

Nói chung, nếu một phong cách không hoạt động theo cách bạn muốn, thì bạn có vấn đề về tính đặc hiệu hoặc tầng và bạn nên khắc phục điều đó thay vì sử dụng

p {
	color: red;
}

p {
	color: purple;
}

p {
	color: blue;
}

Sử dụng

p {
	color: red;
}

p {
	color: purple;
}

p {
	color: blue;
}

p {
	color: red;
}

p {
	color: purple;
}

p {
	color: blue;
}

Theo thời gian, ngày càng nhiều cơ sở mã của bạn sẽ sử dụng nó để ghi đè các thuộc tính đã khai báo trước đó cũng sử dụng nó. Cuối cùng, cơ sở mã của bạn sẽ là một cơn ác mộng không thể cứu vãn

Một ngoại lệ có thể hợp lý khi sử dụng

p {
	color: red;
}

p {
	color: purple;
}

p {
	color: blue;
}

Đây là một ví dụ

<div class="red blue">
<div class="blue red">

<div class="red blue">
<div class="blue red">

Không có

p {
	color: red;
}

p {
	color: purple;
}

p {
	color: blue;
}

p {
	color: red;
}

p {
	color: purple;
}

p {
	color: blue;
}

p {
	color: red;
}

p {
	color: purple;
}

p {
	color: blue;
}

Bạn không cần phải biết ngay mọi bộ chọn sẽ tương tác với những bộ chọn khác như thế nào

Mọi thứ trở nên điên rồ khi bạn bắt đầu sử dụng bộ chọn lồng nhau và bộ chọn hậu duệ trực tiếp (

p {
	color: red;
}

p {
	color: purple;
}

p {
	color: blue;
}

Bạn không biết ngay lập tức kiểu của bộ chọn nào sẽ “chiến thắng” với một tập hợp các bộ chọn và kiểu phức tạp

Điều tôi thực sự muốn bạn kết thúc bài viết này là hiểu rõ hơn về các yếu tố cần thiết của cascade, cách thức hoạt động của nó và tại sao

Tôi muốn bạn hiểu lý do tại sao một số kiểu hiển thị và những kiểu khác thì không. Tôi muốn bạn cảm thấy tự tin rằng bạn có thể gỡ lỗi mọi thứ khi các kiểu không hoạt động như mong đợi

Thứ tự ưu tiên CSS chính xác là gì?

Thứ tự của các lớp trong HTML có quan trọng không?

CSS có thực thi theo thứ tự không?

Thứ tự của các mục CSS theo mức độ ưu tiên tăng dần là gì?