Cách ghi đè trong css
Khi nhiều quy tắc CSS tham chiếu cùng một phần tử HTML, trình duyệt cần một quy tắc ngón tay cái để dự đoán hướng dẫn tạo kiểu nào sẽ được ưu tiên. Điều này được gọi là ghi đè CSS. Tùy thuộc vào loại bộ chọn nào được sử dụng để tạo kiểu cho một phần tử, có một số quy tắc xác định kiểu nào ghi đè kiểu khác Show Hãy lấy một ví dụ nhỏ để hiểu làm thế nào điều này được thực hiện Mã HTML và CSS mẫu hiển thị văn bản Hello World có màu đỏ. Phần tử ghi đè lớpTrong mẫu mã ở trên, phần tử đoạn chỉ định kiểu dáng trong CSS bên ngoài. Điều này áp dụng cho bất kỳ phần tử đoạn văn nào không chỉ là “Xin chào thế giới. ” đoạn văn. Bây giờ, tôi muốn hiển thị đoạn văn bản hello world của mình khác với tất cả các đoạn khác. Đối với điều này, tôi đang thêm một lớp màu xanh lam như hình bên dưới Mã HTML và CSS mẫu ghi đè kiểu phần tử p bằng một lớp cụ thểBây giờ, màu văn bản thay đổi từ Đỏ sang xanh xác nhận rằng một lớp có tính đặc hiệu cao hơn so với thẻ phần tử Lớp ghi đè lớpKiến thức phổ biến là kiểu lớp ghi đè kiểu phần tử chung. Nhưng, bạn có biết làm thế nào một phong cách lớp ghi đè lên một phong cách khác. Mẹo nhỏ này sẽ hữu ích khi bạn có nhiều lớp cạnh tranh với nhau để chỉ định kiểu dáng cho một phần tử cụ thể Mã HTML và CSS mẫu trình bày cách một kiểu lớp có thể ghi đè kiểu lớp khácVới các thay đổi trên, màu chữ hello world chuyển từ xanh sang cam. Ghi chú. Bạn có thể chỉ định tên lớp theo bất kỳ thứ tự nào trong thẻ p nhưng quy tắc ghi đè CSS đề xuất rằng thứ tự ưu tiên được cung cấp cho lớp được xác định cuối cùng trong CSS Id ghi đè lớpBộ chọn lớp có thể sử dụng lại. Nói cách khác, nhiều phần tử có thể có cùng tên lớp và do đó, kiểu dáng giống nhau. Ngược lại, HTML không cho phép bạn sử dụng lại ID. Nếu phần tử bạn đang tạo kiểu có cả thuộc tính lớp và id, trong trường hợp đó, kiểu ID sẽ được ưu tiên hơn lớp. Bởi vì các phần tử khác không thể tham chiếu đến cùng một ID, kiểu bộ chọn ID sẽ cụ thể hơn so với một lớp Mã HTML và CSS mẫu sử dụng bộ chọn ID để ghi đè kiểu bộ chọn lớpNhư mong đợi, màu văn bản xin chào thế giới thay đổi từ màu cam sang màu tím Id ghi đè kiểu nội tuyếnCSS có thể được thêm vào HTML dưới dạng thẻ nội tuyến và khi hoàn tất, kiểu nội tuyến được chỉ định sẽ được ưu tiên hơn các hướng dẫn tạo kiểu khác đã lưu ý ở trên. Bây giờ, hãy viết lại ví dụ hiện tại của chúng ta bằng cách thêm một kiểu nội tuyến vào thành phần đoạn văn trong HTML Mã HTML mẫu chỉ định kiểu nội tuyến sẽ ghi đè kiểu bộ chọn id, lớp và phần tửVới việc bổ sung kiểu nội tuyến, màu văn bản xin chào thế giới thay đổi từ màu tím sang màu xanh lá cây CSS quan trọng ghi đè tất cảQuan trọng là một thuộc tính quan trọng có thể được thêm vào kiểu dáng CSS. Như tên ngụ ý, nó cho biết kiểu dáng mà nó đi kèm là quan trọng và có thể ghi đè kiểu dáng nội tuyến. . quan trọng được thêm vào cuối dòng hướng dẫn tạo kiểu như được thực hiện với ví dụ của chúng tôi bên dưới Một mã CSS mẫu với. thẻ quan trọng được thêm vào kiểu bộ chọn thành phần đoạn vănVăn bản xin chào thế giới hiện được hiển thị bằng màu đỏ vì. quan trọng được thêm vào kiểu thẻ phần tử p sẽ ghi đè tất cả các loại bộ chọn khác Tính đặc hiệu là thuật toán được các trình duyệt sử dụng để xác định thuật toán phù hợp nhất với một phần tử, từ đó xác định giá trị thuộc tính để áp dụng cho phần tử. Thuật toán tính đặc hiệu tính toán trọng số của a để xác định quy tắc nào từ các khai báo CSS cạnh tranh sẽ được áp dụng cho một phần tử Ghi chú. Các trình duyệt xem xét tính đặc hiệu sau khi xác định nguồn gốc và tầm quan trọng của tầng. Nói cách khác, đối với các khai báo thuộc tính cạnh tranh, tính đặc hiệu có liên quan và chỉ được so sánh giữa các bộ chọn từ nguồn gốc một tầng và lớp được ưu tiên cho thuộc tính. Thứ tự xuất hiện trở nên phù hợp khi các đặc điểm của bộ chọn của các khai báo cạnh tranh trong lớp xếp tầng có mức độ ưu tiên bằng nhau Tính đặc hiệu là một thuật toán tính toán trọng số được áp dụng cho một khai báo CSS nhất định. Trọng số được xác định bởi số lượng trong bộ chọn khớp với phần tử (hoặc phần tử giả). Nếu có hai hoặc nhiều khai báo cung cấp các giá trị thuộc tính khác nhau cho cùng một phần tử, thì giá trị khai báo trong khối kiểu có bộ chọn phù hợp với trọng số thuật toán lớn nhất sẽ được áp dụng Thuật toán tính đặc hiệu về cơ bản là một giá trị ba cột gồm ba danh mục hoặc trọng số - ID, LỚP và LOẠI - tương ứng với ba loại bộ chọn. Giá trị đại diện cho số lượng thành phần bộ chọn trong mỗi loại trọng lượng và được viết là ID - LỚP - LOẠI. Ba cột được tạo bằng cách đếm số lượng thành phần bộ chọn cho từng loại trọng số bộ chọn trong bộ chọn khớp với phần tử Các loại trọng số của bộ chọn được liệt kê ở đây theo thứ tự giảm dần độ đặc hiệu cột IDChỉ bao gồm bộ chọn ID, chẳng hạn như 6. Đối với mỗi ID trong bộ chọn phù hợp, hãy thêm 1-0-0 vào giá trị trọng sốcột LỚPBao gồm bộ chọn lớp, chẳng hạn như 7, bộ chọn thuộc tính như 8 và 9, và các lớp giả, chẳng hạn như 0, 1 và 2. Đối với mỗi lớp, bộ chọn thuộc tính hoặc lớp giả trong bộ chọn phù hợp, hãy thêm 0-1-0 vào giá trị trọng sốcột LOẠIBao gồm các bộ chọn loại, chẳng hạn như 3, 4 và 5 và các phần tử giả như 6, 7 và tất cả các bộ chọn khác có ký hiệu dấu hai chấm. Đối với mỗi loại hoặc phần tử giả trong bộ chọn phù hợp, hãy thêm 0-0-1 vào giá trị trọng sốKhông có giá trịBộ chọn phổ quát ( 8) và lớp giả 9 và các tham số của nó không được tính khi tính trọng số nên giá trị của chúng là 0-0-0, nhưng chúng khớp với các phần tử. Các bộ chọn này không ảnh hưởng đến giá trị trọng lượng đặc hiệuBộ kết hợp, chẳng hạn như 0, 1, 2, " ", và 3, có thể làm cho bộ chọn cụ thể hơn trong những gì được chọn nhưng chúng không thêm bất kỳ giá trị nào vào trọng số cụ thểLớp giả phủ định, 4, bản thân nó không có trọng số. Các lớp giả 5 hoặc 6 cũng vậy. Tuy nhiên, các tham số trong các bộ chọn này không. Giá trị của cả hai đều đến từ tham số trong danh sách tham số có độ đặc hiệu cao nhất. Những điều được thảo luận dưới đâybộ chọn phù hợpTrọng lượng cụ thể đến từ bộ chọn phù hợp. Lấy bộ chọn CSS này với ba bộ chọn được phân tách bằng dấu phẩy làm ví dụ
Bộ chọn 0 trong danh sách bộ chọn ở trên, với trọng số cụ thể là 1, áp dụng khai báo 2 cho tất cả các kiểu nhập mật khẩuTất cả đầu vào, bất kể loại nào, khi nhận được tiêu điểm, khớp với bộ chọn thứ hai trong danh sách, 3, với trọng số cụ thể là 4; . Nếu đầu vào mật khẩu có tiêu điểm, nó sẽ khớp với 3 và trọng số cụ thể cho khai báo kiểu 2 sẽ là 4. Khi mật khẩu đó không có tiêu điểm, trọng số cụ thể vẫn ở mức 1Tính cụ thể của đầu vào bắt buộc được lồng trong một phần tử có thuộc tính 1 là 2, dựa trên một ID, hai lớp giả và một loại phần tửNếu loại đầu vào mật khẩu được lồng trong một phần tử có bộ 1, thì trọng số cụ thể sẽ là 2, cho dù nó có tiêu điểm hay không. Tại sao trọng số đặc hiệu là 2 thay vì 4 hoặc 1 trong trường hợp này? . Trọng số được xác định bằng cách so sánh các giá trị trong ba cột, từ trái sang phải
Khi các giá trị đặc hiệu của các bộ chọn có liên quan được xác định, số lượng các thành phần bộ chọn trong mỗi cột được so sánh, từ trái sang phải
Cột đầu tiên là giá trị của thành phần ID, là số lượng ID trong mỗi bộ chọn. Các số trong cột ID của các bộ chọn cạnh tranh được so sánh. Bộ chọn có giá trị lớn hơn trong cột ID sẽ thắng bất kể giá trị trong các cột khác là gì. Trong ví dụ trên, mặc dù bộ chọn màu vàng có tổng cộng nhiều thành phần hơn nhưng chỉ có giá trị của cột đầu tiên là quan trọng Nếu số trong cột ID của các bộ chọn cạnh tranh giống nhau, thì cột tiếp theo, LỚP, sẽ được so sánh, như minh họa bên dưới
Cột LỚP là số lượng tên lớp, bộ chọn thuộc tính và lớp giả trong bộ chọn. Khi giá trị cột ID giống nhau, bộ chọn có giá trị lớn hơn trong cột LỚP sẽ thắng, bất kể giá trị trong cột LOẠI. Điều này được thể hiện trong ví dụ dưới đây
Nếu các số trong cột LỚP và ID trong các bộ chọn cạnh tranh giống nhau, thì cột LOẠI sẽ có liên quan. Cột TYPE là số loại phần tử và phần tử giả trong bộ chọn. Khi hai cột đầu tiên có cùng giá trị, bộ chọn có số lớn hơn trong cột LOẠI sẽ thắng Nếu các bộ chọn cạnh tranh có cùng giá trị trong cả ba cột, thì quy tắc lân cận sẽ phát huy tác dụng, trong đó kiểu được khai báo cuối cùng sẽ được ưu tiên
Lớp giả phù hợp-bất kỳ 5, lớp giả quan hệ 6 và lớp giả phủ định 4 không được coi là lớp giả trong phép tính trọng số đặc hiệu. Bản thân họ không thêm bất kỳ trọng số nào vào phương trình đặc hiệu. Tuy nhiên, các tham số bộ chọn được truyền vào dấu ngoặc đơn lớp giả là một phần của thuật toán đặc hiệu;
Lưu ý rằng trong cách ghép nối CSS ở trên, trọng số đặc hiệu được cung cấp bởi lớp giả 5, 6 và 4 là giá trị của tham số bộ chọn, không phải của lớp giảCả ba lớp giả này đều chấp nhận danh sách bộ chọn phức tạp, danh sách bộ chọn được phân tách bằng dấu phẩy, làm tham số. Tính năng này có thể được sử dụng để tăng tính đặc hiệu của bộ chọn
Trong khối mã CSS ở trên, chúng tôi đã bao gồm 7 trong bộ chọn. 7 này thêm 9 vào trọng số cụ thể của mỗi đoạnNói chung, bạn muốn giảm độ đặc hiệu xuống mức tối thiểu, nhưng nếu bạn cần tăng độ đặc hiệu của một phần tử vì một lý do cụ thể, ba lớp giả này có thể giúp ích
Trong ví dụ này, tất cả các liên kết sẽ có màu xanh lam, trừ khi bị ghi đè bởi một khai báo liên kết có 3 ID trở lên, giá trị màu khớp với một 0 bao gồm hoặc nếu liên kết có một khai báo màu. Nếu bạn sử dụng một kỹ thuật như vậy, hãy thêm một bình luận để giải thích lý do tại sao cần hackCác kiểu nội tuyến được thêm vào một phần tử (e. g. , 2) luôn ghi đè bất kỳ kiểu thông thường nào trong biểu định kiểu của tác giả và do đó, có thể được coi là có tính đặc hiệu cao nhất. Hãy coi các kiểu nội tuyến có trọng số cụ thể là 3Cách duy nhất để ghi đè kiểu nội tuyến là sử dụng 1Nhiều khung và thư viện JavaScript thêm kiểu nội tuyến. Sử dụng 1 với bộ chọn được nhắm mục tiêu cụ thể, chẳng hạn như bộ chọn thuộc tính sử dụng kiểu nội tuyến, là một cách để ghi đè các kiểu nội tuyến này
0Đảm bảo bao gồm một nhận xét với mỗi lần bao gồm cờ quan trọng để những người bảo trì mã hiểu lý do tại sao một mẫu chống CSS được sử dụng Các khai báo CSS được đánh dấu là quan trọng sẽ ghi đè bất kỳ khai báo nào khác trong cùng một tầng và nguồn gốc. Mặc dù về mặt kỹ thuật, 1 không liên quan gì đến tính đặc hiệu, nhưng nó tương tác trực tiếp với tính đặc hiệu và tầng. Nó đảo ngược thứ tự xếp tầng của các biểu định kiểuNếu các khai báo từ cùng một nguồn gốc và tầng tầng xung đột và một giá trị thuộc tính có cờ 1 được đặt, thì khai báo quan trọng sẽ được áp dụng bất kể tính đặc hiệu. Khi các khai báo xung đột từ cùng một nguồn gốc và lớp xếp tầng với cờ 1 được áp dụng cho cùng một thành phần, thì khai báo có tính đặc hiệu cao hơn sẽ được áp dụngSử dụng 1 để ghi đè tính đặc hiệu được coi là một cách làm không tốt và nên tránh cho mục đích này. Hiểu và sử dụng hiệu quả tính đặc hiệu và tầng có thể loại bỏ mọi nhu cầu về cờ 1Thay vì sử dụng 1 để ghi đè CSS nước ngoài (từ các thư viện bên ngoài, như Bootstrap hoặc normalize. css), nhập trực tiếp tập lệnh của bên thứ ba vào các lớp theo tầng. Nếu bạn phải sử dụng 1 trong CSS của mình, hãy nhận xét cách sử dụng của bạn để những người bảo trì mã trong tương lai biết lý do tại sao phần khai báo được đánh dấu là quan trọng và biết để không ghi đè lên nó. Nhưng chắc chắn, không sử dụng 1 khi viết các plugin hoặc khung mà các nhà phát triển khác sẽ cần kết hợp mà không thể kiểm soátLớp giả điều chỉnh độ đặc hiệu 9 luôn có độ đặc hiệu được thay thế bằng 0, 7. Nó cho phép tạo các bộ chọn CSS rất cụ thể trong phần tử nào được nhắm mục tiêu mà không làm tăng tính đặc hiệuTrong việc tạo CSS của bên thứ ba để các nhà phát triển không có quyền truy cập chỉnh sửa CSS của bạn sử dụng, cách tốt nhất là tạo CSS với độ đặc hiệu thấp nhất có thể. Ví dụ: nếu chủ đề của bạn bao gồm CSS sau 1Sau đó, nhà phát triển triển khai tiện ích có thể dễ dàng ghi đè màu liên kết chỉ bằng bộ chọn loại 2Thay vì sử dụng 1, hãy cân nhắc sử dụng các lớp xếp tầng và sử dụng độ đặc hiệu trọng lượng thấp trong toàn bộ CSS của bạn để các kiểu dễ dàng bị ghi đè bằng các quy tắc cụ thể hơn một chút. Sử dụng HTML ngữ nghĩa giúp cung cấp các điểm neo để áp dụng kiểu dángBằng cách chỉ ra phần tài liệu bạn đang tạo kiểu trước thành phần bạn đang chọn, quy tắc sẽ trở nên cụ thể hơn. Tùy vào cách bạn thêm mà bạn có thể thêm ít, nhiều hay không cụ thể như hình bên dưới 3 4Bất kể thứ tự, tiêu đề sẽ có màu xanh vì quy tắc đó là cụ thể nhất Giảm tính đặc hiệu của IDTính đặc hiệu dựa trên hình thức của bộ chọn. Bao gồm 9 của một phần tử làm bộ chọn thuộc tính thay vì bộ chọn id là một cách hay để làm cho một phần tử cụ thể hơn mà không cần thêm quá nhiều tính cụ thể. Trong ví dụ trước, bộ chọn 00 được tính là bộ chọn thuộc tính nhằm mục đích xác định tính đặc hiệu của bộ chọn, mặc dù nó chọn một IDBạn cũng có thể bao gồm 9 hoặc bất kỳ phần nào của bộ chọn làm tham số trong lớp giả điều chỉnh tính đặc hiệu của 9 nếu bạn cần làm cho bộ chọn cụ thể hơn nhưng hoàn toàn không muốn thêm bất kỳ tính đặc hiệu nàoLà một trường hợp đặc biệt để tăng tính đặc hiệu, bạn có thể sao chép trọng số từ các cột LỚP hoặc ID. Sao chép bộ chọn id, lớp, lớp giả hoặc thuộc tính trong bộ chọn hỗn hợp sẽ tăng tính đặc hiệu khi ghi đè các bộ chọn rất cụ thể mà bạn không có quyền kiểm soát 5Sử dụng cái này một cách tiết kiệm, nếu có. Nếu sử dụng sao chép bộ chọn, hãy luôn nhận xét CSS của bạn Bằng cách sử dụng 5 và 4 (và cả 6), bạn có thể tăng tính cụ thể ngay cả khi bạn không thể thêm ____62_______9 vào phần tử gốc 6Tận dụng các lớp theo tầng là cách tiêu chuẩn để cho phép một tập hợp kiểu được ưu tiên hơn một tập hợp kiểu khác; . Các kiểu tác giả bình thường (không quan trọng) được nhập vào các lớp xếp tầng có mức độ ưu tiên thấp hơn so với các kiểu tác giả không có lớp Nếu các kiểu đến từ một biểu định kiểu mà bạn không thể chỉnh sửa hoặc không hiểu và bạn cần ghi đè các kiểu, thì một chiến lược là nhập các kiểu mà bạn không kiểm soát vào một lớp xếp tầng. Các kiểu trong các lớp được khai báo sau đó sẽ được ưu tiên, với các kiểu không có lớp được ưu tiên hơn tất cả các kiểu lớp từ cùng một nguồn gốc Khi hai bộ chọn từ các lớp khác nhau khớp với cùng một phần tử, nguồn gốc và mức độ quan trọng sẽ được ưu tiên; 7Trong ví dụ trên, tất cả văn bản đoạn văn, bao gồm cả nội dung lồng nhau, sẽ là _______40_______07 bất kể đoạn văn đó có bao nhiêu tên lớp phù hợp với biểu định kiểu TW Cách tiếp cận tốt nhất là không sử dụng 1. Các giải thích ở trên về tính đặc hiệu sẽ hữu ích trong việc tránh sử dụng cờ và loại bỏ nó hoàn toàn khi gặp phảiĐể loại bỏ nhu cầu nhận thức về 1, bạn có thể thực hiện một trong các cách sau
Tất cả các phương pháp này được đề cập trong các phần trước Nếu bạn không thể xóa cờ 1 khỏi biểu định kiểu tác giả, giải pháp duy nhất để ghi đè các kiểu quan trọng là sử dụng 1. Tạo một lớp xếp tầng ghi đè khai báo quan trọng là một giải pháp tuyệt vời. Hai cách để làm điều này bao gồmPhương pháp 1
8Phương pháp 2
Độ đặc hiệu của bộ chọn kiểu quan trọng trong lớp có thể thấp, miễn là nó phù hợp với phần tử bạn đang cố gắng ghi đè. Các lớp bình thường nên được khai báo bên ngoài lớp vì các kiểu lớp có mức độ ưu tiên thấp hơn so với các kiểu không có lớp Sự gần gũi của một phần tử với các phần tử khác được tham chiếu trong một bộ chọn nhất định không ảnh hưởng đến tính đặc hiệu 1Các phần tử 16 sẽ có màu tím vì khi khai báo có cùng độ đặc hiệu, bộ chọn được khai báo cuối cùng sẽ được ưu tiênCác kiểu dành cho phần tử được nhắm mục tiêu trực tiếp sẽ luôn được ưu tiên hơn các kiểu được kế thừa, bất kể tính đặc hiệu của quy tắc được kế thừa. Đưa ra CSS và HTML sau 2 3 4 sẽ có màu tím vì bộ chọn 4 nhắm mục tiêu cụ thể vào phần tử, trong khi màu xanh lục được kế thừa từ các khai báo 19Trong CSS sau, chúng tôi có ba bộ chọn nhắm mục tiêu các phần tử 20 để đặt màu. Đối với một đầu vào nhất định, trọng số cụ thể của khai báo màu được ưu tiên là bộ chọn phù hợp với trọng số lớn nhất 4Nếu tất cả các bộ chọn ở trên nhắm mục tiêu đến cùng một đầu vào, đầu vào sẽ có màu đỏ, vì khai báo đầu tiên có giá trị cao nhất trong cột ID Bộ chọn cuối cùng có bốn thành phần LOẠI. Mặc dù nó có giá trị số nguyên cao nhất, cho dù có bao nhiêu phần tử và phần tử giả được bao gồm, ngay cả khi có 150, các thành phần TYPE không bao giờ được ưu tiên hơn các thành phần LỚP. Các giá trị cột được so sánh bắt đầu từ trái sang phải khi các giá trị cột bằng nhau Nếu chúng tôi đã chuyển đổi bộ chọn id trong mã ví dụ ở trên thành bộ chọn thuộc tính, thì hai bộ chọn đầu tiên sẽ có cùng tính đặc hiệu, như được hiển thị bên dưới 5Khi nhiều khai báo có độ đặc hiệu như nhau, khai báo cuối cùng được tìm thấy trong CSS sẽ được áp dụng cho phần tử. Nếu cả hai bộ chọn khớp với cùng một 20, màu sẽ có màu xanh lam
Ghi đè hoạt động như thế nào trong CSS?CSS cho phép bạn áp dụng các kiểu cho trang web. Quan trọng hơn, CSS cho phép bạn làm điều này độc lập với HTML tạo nên mỗi trang web. ghi đè. Ghi đè trong CSS có nghĩa là bạn đang cung cấp bất kỳ thuộc tính kiểu nào cho phần tử mà bạn đã cung cấp kiểu .
Làm cách nào để ghi đè kiểu HTML bằng CSS?Cách duy nhất để ghi đè kiểu nội tuyến là sử dụng. từ khóa quan trọng bên cạnh quy tắc CSS . Sau đây là một ví dụ về nó.
Làm cách nào để ghi đè CSS id bằng CSS lớp?Ví dụ về ghi đè kiểu CSS bằng bộ chọn Lớp. Ở đây, bộ chọn Lớp ghi đè bộ chọn ID vì nó là bộ chọn được sử dụng lần cuối. Bộ chọn ID chỉ được ưu tiên hơn bộ chọn Lớp nếu cả hai đều được sử dụng trong cùng một phần tử .
Làm cách nào để ghi đè kiểu nội dung trong CSS?Người dùng phải đặt kiểu nội tuyến bên trong thẻ HTML . Mặc dù họ phải đặt các biểu định kiểu nhúng bên trong thẻ HTML |