Câu trả lời này dành cho người mới bắt đầu tuyệt đối. Nếu bạn muốn có một cái nhìn tổng quan về câu trả lời này, vui lòng đọc câu trả lời thứ hai của tôi.
Xếp tầng là quá trình kết hợp các bảng định kiểu khác nhau và giải quyết xung đột giữa các quy tắc và khai báo CSS khác nhau khi có nhiều hơn một quy tắc áp dụng cho một phần tử nhất định . Bởi vì như bạn có thể đã biết một khai báo cho một thuộc tính kiểu nhất định như kích thước phông chữ có thể xuất hiện trong một số biểu định kiểu và cũng có thể xuất hiện nhiều lần trong một biểu định kiểu duy nhất.
Để hiểu phân tầng, bạn phải bắt đầu với giai đoạn phân tích cú pháp CSS vì trong giai đoạn phân tích cú pháp, bước đầu tiên là giải quyết các khai báo CSS xung đột và bước thứ hai là xử lý các giá trị CSS cuối cùng.
Bây giờ CSS cũng có thể đến từ các nguồn khác nhau. Cái phổ biến nhất là CSS mà các nhà phát triển chúng tôi viết. Các khai báo mà chúng tôi đặt trong các bảng định kiểu của mình được gọi là khai báo tác giả. Một nguồn khác có thể là khai báo của người dùng, là CSS đến từ người dùng. Ví dụ: khi người dùng thay đổi kích thước phông chữ mặc định trong trình duyệt thì đó là CSS của người dùng và cuối cùng nhưng không kém phần quan trọng là các khai báo trình duyệt mặc định.
Ví dụ: nếu chúng tôi đặt một thẻ liên kết trong HTML của mình cho một liên kết và sau đó không tạo kiểu cho nó, nó thường sẽ được hiển thị bằng văn bản màu xanh lam và được gạch chân, đúng không. Đó được gọi là CSS tác nhân người dùng vì nó được đặt bởi trình duyệt. Vì vậy, tầng kết hợp các khai báo CSS đến từ tất cả các nguồn khác nhau này, nhưng làm thế nào để tầng thực sự giải quyết xung đột khi nhiều hơn một quy tắc áp dụng?
Vâng, những gì nó làm là xem xét tầm quan trọng, ở tính cụ thể của bộ chọn và thứ tự nguồn của thứ tự khai báo xung đột để xác định cái nào được ưu tiên hơn và đây là cách hoạt động. Trước hết, dòng thác bắt đầu bằng cách đưa ra các khai báo xung đột có tầm quan trọng khác nhau dựa trên nơi chúng được khai báo trên nguồn của chúng. Các khai báo quan trọng nhất là các khai báo của người dùng được đánh dấu bằng từ khóa quan trọng.
Tuyên bố quan trọng thứ hai là tuyên bố tác giả được đánh dấu quan trọng. Thứ ba, khai báo tác giả bình thường, sau đó là khai báo người dùng bình thường, và cuối cùng là khai báo ít quan trọng nhất là khai báo trình duyệt mặc định, điều này thực sự có ý nghĩa rằng chúng ta có thể dễ dàng ghi đè các khai báo này theo mặc định từ trình duyệt.
Bây giờ, rất nhiều lần chúng ta sẽ chỉ có một loạt các quy tắc mâu thuẫn trong bảng định kiểu tác giả của chúng tôi mà không có bất kỳ từ khóa quan trọng nào. Đó thực sự là tình huống phổ biến nhất và trong trường hợp này, tất cả các khai báo đều có tầm quan trọng chính xác như nhau. Bây giờ, điều gì xảy ra trong trường hợp này? Việc phân tầng làm trong trường hợp này là tính toán và so sánh các đặc điểm cụ thể của các bộ chọn khai báo và đây là cách nó hoạt động.
Kiểu nội tuyến có độ đặc hiệu cao nhất, tiếp theo là ID, sau đó là lớp, lớp giả và bộ chọn thuộc tính và cuối cùng là bộ chọn phần tử và phần tử giả ít cụ thể nhất. Vì vậy, khi chúng ta có các khai báo mâu thuẫn với cùng tầm quan trọng như chúng ta đã thấy trong trang trình bày cuối cùng, chúng ta sẽ tính toán độ cụ thể của bộ chọn của chúng dựa trên các mức độ ưu tiên mà tôi vừa chỉ cho bạn, nhưng hãy xem cách chúng ta thực sự tính toán các thông số cụ thể với một ví dụ nhỏ, điều đó luôn tốt nhất, đúng không.
Từ ví dụ trên, tất cả các khai báo này đều có tầm quan trọng như nhau, vì chúng đều là khai báo của tác giả. Vì vậy, hãy tính toán các đặc điểm cụ thể của bộ chọn của chúng để tìm hiểu xem màu nền sẽ là xanh lam, xanh lá cây, tím hoặc vàng và đây là cách chúng tôi thực hiện. Tính cụ thể thực sự không chỉ là một con số, mà là một con số cho mỗi loại trong số bốn loại mà tôi đã cho bạn thấy trước đây. Kiểu nội tuyến, ID, lớp, phần tử giả và thuộc tính, cuối cùng là phần tử và đối với mỗi phần tử này, chúng tôi đếm số lần xuất hiện trong bộ chọn.
Vì vậy, ở đây trong bộ chọn một, tất nhiên chúng ta không có bất kỳ kiểu nội dòng nào, bởi vì một kiểu nội tuyến phải được viết trong HTML, điều này không đúng ở đây, vì vậy nó là số không. Chúng tôi cũng không có ID ở đây, vì vậy nó một lần nữa là số 0, nhưng chúng tôi có một lớp, lớp nút. Vì vậy, đối với danh mục lớp, chúng ta có một cái, và cuối cùng, không có bộ chọn phần tử nào ở đây nên không cho cái đó nữa, và thế là xong. Độ đặc hiệu của bộ chọn là không, không, một, không.
Bây giờ, bây giờ chúng ta hãy so sánh nó với những người khác. Kiểu tiếp theo cũng không phải là kiểu nội tuyến, vì vậy không cho kiểu đầu tiên. Bây giờ ở đây chúng ta thực sự có một bộ chọn ID cho ID điều hướng, phải không, vì vậy nó là một cho ID. Chúng tôi cũng có hai lớp kéo sang phải và nút, vì vậy nó là hai cho danh mục lớp và cuối cùng, cũng có hai bộ chọn phần tử ở đây. Phần tử nav và phần tử div, có nghĩa là nó cũng là hai cho danh mục phần tử. Vì vậy, cuối cùng độ đặc hiệu của bộ chọn là 0, một, hai, hai, đây thực sự là một bộ chọn rất cụ thể.
Bộ chọn số ba rất đơn giản. Nó chỉ là một bộ chọn phần tử và do đó độ đặc hiệu là không, không, không, một.
Bây giờ là cái cuối cùng, bộ chọn số bốn. Trước tiên, chúng ta có ID điều hướng, vì vậy nó là một cho ID. Tiếp theo, chúng ta có một lớp, lớp nút và cũng là một lớp giả, là lớp di chuột, làm cho nó có hai cho danh mục lớp tổng cộng. Vì cũng có một bộ chọn phần tử nên độ đặc hiệu cuối cùng là 0, một, hai, một.
Bây giờ chúng ta hãy biết cách chúng ta thực sự sử dụng những con số này để tìm ra bộ chọn nào áp dụng. Chúng tôi bắt đầu xem xét các con số từ trái sang phải bắt đầu với danh mục cụ thể nhất, các kiểu nội tuyến. Nếu có một bộ chọn với một cho các kiểu nội tuyến sẽ thắng tất cả các bộ chọn khác, vì đây là danh mục cụ thể nhất. Chà, đây không phải là trường hợp ở đây, vì vậy hãy chuyển sang ID. Chúng tôi thấy rằng các bộ chọn hai và bốn có một ở đây trong khi các bộ khác có số 0, vì vậy các bộ chọn có số 0 bị loại khỏi trò chơi vì chúng ít cụ thể hơn sau đó các bộ chọn hai và bốn là những người có ID.
Bây giờ vì cả hai bộ chọn đều có một trong danh mục ID nên chúng ta phải tiếp tục và kiểm tra các lớp. Cả hai đều có một hai trong danh mục này vẫn là một sự ràng buộc giữa chúng và cuối cùng, trong danh mục phần tử, bộ chọn hai có một hai trong khi bộ chọn bốn chỉ có một và vì vậy chúng ta có một người chiến thắng ở đây. Bộ chọn số hai là bộ chọn cụ thể nhất và vì vậy nó sẽ cung cấp cho nút của chúng ta nền màu xanh lục.
Vì vậy, chúng ta bắt đầu với một loạt các giá trị được khai báo trong trường hợp này là xanh lam, xanh lục, tím và vàng, một trong số chúng sẽ thắng và trở thành giá trị xếp tầng, trong ví dụ của chúng ta là màu xanh lá cây.
Bây giờ hãy tưởng tượng khu vực bốn cũng có hai phần tử thì cả hai bộ chọn hai và bốn sẽ có cùng độ đặc hiệu chính xác, đúng không. Vì vậy, những gì sẽ xảy ra trong trường hợp này và tôi hứa với bạn rằng nó gần như kết thúc rồi. Chà nếu vẫn còn ràng buộc tại thời điểm này thì khai báo CSS cuối cùng được viết trong mã là khai báo sẽ áp dụng. Vì vậy, một lần nữa nếu mọi thứ đều bằng nhau, nếu tất cả các bộ chọn khai báo có cùng tính cụ thể thì đó chỉ đơn giản là khai báo cuối cùng sẽ được sử dụng để tạo kiểu cho phần tử đã chọn.