CSS sử dụng thang số để xác định sức mạnh của bộ chọn. Sức mạnh, như cái nào là mạnh nhất, hay nói cách khác, bộ chọn nào có độ đặc hiệu cao nhất. Bộ chọn có số độ cụ thể cao nhất sẽ luôn quyết định phần tử HTML trông như thế nào, bất kể kiểu dáng nào được các bộ chọn khác, yếu hơn áp dụng cho nó.
Nếu bạn có một phần tử nút, có nhiều cách để áp dụng các kiểu cho nó. Trong CSS, 3 bộ chọn thường được sử dụng là type , class , id .
Bạn có thể tạo kiểu trực tiếp cho một phần tử thông qua bộ chọn kiểu:
button {
background-color: red;
}Bạn có thể sử dụng thuộc tính lớp:
.button {
background-color: red;
}Hoặc thuộc tính id:
#button {
background-color: red;
}Mỗi bộ chọn có giá trị số là 1.
Vì vậy, nếu tất cả các bộ chọn CSS ở trên (loại, lớp, id) có cùng giá trị (1), thì bộ quy tắc nào ở trên sẽ chiến thắng, khi được sử dụng trong cùng một biểu định kiểu?
ID chiến thắng (#button ) vì ID được ưu tiên hơn bộ chọn lớp và loại.
Nếu không có ID liên quan thì sao?
Sau đó, bộ chọn lớp (.button ) thắng vì các lớp được ưu tiên hơn các bộ chọn kiểu.
Chờ đã, còn “Xếp tầng” (CSS =Cascading Style Sheets) của CSS thì sao?
Trong CSS, nếu tất cả mọi thứ đều bằng nhau , bộ chọn nào được áp dụng cuối cùng trong Bảng định kiểu của bạn, sẽ thắng.
Giả sử bạn thêm 3 lớp có cùng tên (.hero-button ,) trong biểu định kiểu của bạn. Mỗi lớp nhắm mục tiêu cùng một thuộc tính kiểu (background-color ), nhưng mỗi lớp có các thuộc tính giá trị khác nhau , trong trường hợp này, tương ứng là xanh lá cây, xanh lam, đỏ.
.hero-button {
background-color: green;
}
.hero-button {
background-color: blue;
}
.hero-button {
background-color: red;
}Sau đó, bạn áp dụng tất cả 3 trong số chúng cho cùng một phần tử HTML:
<button class="hero-button">Button</button>
.hero-button cuối cùng lớp trong biểu định kiểu sẽ đứng trước bất kỳ lớp nào trước đó có cùng tên lớp, làm cho màu nền của nút của bạn có màu đỏ. Đó là cách hoạt động của tầng CSS, thứ tự cụ thể là từ trên xuống dưới, với bộ chọn dưới cùng sẽ chiến thắng. Hãy nhớ rằng, điều này chỉ đúng 100% khi tất cả mọi thứ đều bình đẳng.
Quan trọng:nếu bạn có nhiều bộ chọn có cùng tên, thì bộ chọn ở cuối biểu định kiểu của bạn sẽ không ghi đè lên tất cả các kiểu được áp dụng bởi bộ chọn trước đó có cùng tên, nó sẽ chỉ ghi đè thuộc tính kiểu dáng đã chỉ định.
Bối rối?
Đừng lo lắng, điều đó sẽ có ý nghĩa trong giây lát.
Đây là 3 .hero-button các lớp trước đó, tất cả đều có cùng background-color các thuộc tính từ trước, nhưng với hai lớp đầu tiên, mỗi lớp nhận được một thuộc tính kiểu bổ sung (padding &font-size ):
.hero-button {
background-color: green;
padding: 2rem;
}
.hero-button {
background-color: blue;
font-size: 2rem;
}
.hero-button {
background-color: red;
}Biểu định kiểu của chúng tôi hiện có 3 lớp CSS, có cùng tên, tất cả đều nhắm mục tiêu cùng một thuộc tính màu nền đến phần tử nút HTML - nhưng hai lớp đầu tiên có các thuộc tính tạo kiểu bổ sung. Bạn nghĩ điều gì sẽ xảy ra?
Đây là kết quả:
https://codepen.io/StrengthandFreedom/pen/mdyMGPL
Như bạn có thể thấy, phần tử nút của chúng tôi xếp chồng với nhau (kết hợp) tất cả các thuộc tính tạo kiểu từ 3 .hero-button của chúng tôi và bây giờ phần tử nút của chúng ta nhận được cả 3 thuộc tính:
padding: 2rem;
font-size: 2rem;
background-color: red;Nói cách khác, khi bạn có các bộ chọn CSS trong biểu định kiểu có tên giống hệt nhau, bạn sẽ chỉ bị ghi đè các thuộc tính nếu các bộ chọn của bạn nhắm mục tiêu đến các thuộc tính giống nhau.
Trong ví dụ trên, cả 3 lớp đều nhắm mục tiêu background-color thuộc tính, và ở đây, lớp dưới cùng sẽ chiến thắng, vì quy tắc Xếp tầng CSS (Tính đặc trưng của đơn hàng). Nhưng kể từ .hero-button cuối cùng trong mục tiêu biểu định kiểu của bạn, không phải padding cũng không phải font-size , các thuộc tính đó từ hai .hero-button đầu tiên các lớp được phép áp dụng cho phần tử nút.
Lý do tôi đánh chết con ngựa chết ở điểm này là bạn chắc chắn sẽ thấy mình ở trong tình huống bạn đang xử lý một cơ sở mã CSS khổng lồ, vô tổ chức, nơi nhiều nhà phát triển đã góp phần làm cho cuộc sống của bạn trở nên khốn khổ.
Một trong những tình huống phổ biến nhất là các nhà phát triển khác nhau đã thêm các lớp CSS vào biểu định kiểu đã tồn tại ở một nơi khác và điều đó sẽ nhanh chóng gây ra nhầm lẫn nếu bạn không biết hoặc quên rằng CSS sẽ xếp chồng các thuộc tính lại với nhau như chúng ta đã thấy trước đó.
Vì vậy, bạn có thể thêm một lớp CSS có tên:primary-button với các thuộc tính sau:
.primary-button {
background-color: red
padding: 1rem;
font-size: 1.125rem;
}Tuy nhiên, vì một số lý do, nút của bạn dường như có bóng trên đó mà bạn đã không thêm vào. Chà, điều đó có thể do một số nguyên nhân, hoặc vì ai đó đã áp dụng kiểu trực tiếp trên phần tử nút:
button {
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
Hoặc do trước đó ai đó đã thêm một lớp trong biểu định kiểu có cùng tên và thêm box-shadow tài sản, như thế này:
.primary-button {
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
Để xóa kiểu không mong muốn, bạn phải xác định vị trí trong cơ sở mã của mình nơi áp dụng thuộc tính không mong muốn này và xóa nó hoặc nhắm mục tiêu trực tiếp và xóa nó trong your .primary-button lớp học, như thế này:
.primary-button {
background-color: red
padding: 1rem;
font-size: 1.125rem;
box-shadow: 0; /*removes existing box shadow value*/
}Tôi biết bạn đang nghĩ gì. Đây là một cách giải quyết vấn đề lộn xộn. Chính xác. Nhưng đôi khi bạn sẽ tiếp xúc với một dự án lớn và vô tổ chức (thường có nhiều mã kế thừa), nơi bạn không có quyền truy cập vào tất cả mã CSS hiện có (bất kỳ nhà phát triển nào có một số kinh nghiệm đều có thể liên quan đến điều này). Trong loại tình huống này, bạn không thể chỉ sửa đổi mã hiện tại theo ý muốn - bạn phải ghi đè mã hiện có và trong trường hợp đó, bạn nên biết cách Hoạt động của Đặc điểm CSS và Thứ tự nguồn hoạt động.
Bạn có thể sử dụng Công cụ tính độ cụ thể trên trang web này để so sánh số độ cụ thể của các bộ chọn CSS khác nhau, bao gồm bộ chọn nhóm (bộ chọn kết hợp).
Mẹo:một cách tốt để tránh gặp phải các vấn đề về tính cụ thể trong CSS là sử dụng chủ yếu các lớp để tạo kiểu cho giao diện người dùng của bạn thay vì bộ chọn kiểu và chỉ sử dụng ID một cách tiết kiệm. Ngoài ra, hãy tránh sử dụng các bộ chọn nhóm nếu bạn có thể vì chúng có thể dẫn đến các vấn đề khó lường trong cơ sở mã đang phát triển.