Ghi đè lớp css trong javascript

Mục đích của bài học này là phát triển sự hiểu biết của bạn về một số khái niệm cơ bản nhất của CSS — tầng, tính đặc hiệu và tính kế thừa — điều khiển cách CSS được áp dụng cho HTML và cách giải quyết xung đột giữa các khai báo kiểu

Mặc dù học qua bài học này có vẻ ít liên quan ngay lập tức và mang tính hàn lâm hơn một chút so với một số phần khác của khóa học, nhưng việc hiểu các khái niệm này sẽ giúp bạn tránh được rất nhiều khó khăn sau này. Chúng tôi khuyến khích bạn xem kỹ phần này và kiểm tra xem bạn đã hiểu các khái niệm chưa trước khi tiếp tục

điều kiện tiên quyết. Biết sử dụng máy tính cơ bản, cài đặt phần mềm cơ bản, kiến ​​thức cơ bản về làm việc với tệp, kiến ​​thức cơ bản về HTML (học Giới thiệu về HTML) và ý tưởng về cách thức hoạt động của CSS (học các bước đầu tiên của CSS. )Khách quan. Để tìm hiểu về tầng và tính đặc hiệu cũng như cách hoạt động của tính kế thừa trong CSS

xung đột quy tắc

CSS là viết tắt của Cascading Style Sheets và từ đầu tiên đó là phân tầng cực kỳ quan trọng để hiểu — cách hoạt động của tầng là chìa khóa để hiểu CSS

Tại một số thời điểm, bạn sẽ làm việc trên một dự án và bạn sẽ thấy rằng CSS mà bạn nghĩ nên áp dụng cho một phần tử không hoạt động. Thông thường, vấn đề là bạn tạo hai quy tắc áp dụng các giá trị khác nhau của cùng một thuộc tính cho cùng một phần tử. Cascade và khái niệm đặc hiệu có liên quan chặt chẽ là các cơ chế kiểm soát quy tắc nào được áp dụng khi có xung đột như vậy. Quy tắc tạo kiểu cho phần tử của bạn có thể không phải là quy tắc bạn mong đợi, vì vậy bạn cần hiểu cách các cơ chế này hoạt động

Điều quan trọng nữa ở đây là khái niệm kế thừa, có nghĩa là một số thuộc tính CSS theo mặc định kế thừa các giá trị được đặt trên phần tử cha của phần tử hiện tại và một số thì không. Điều này cũng có thể gây ra một số hành vi mà bạn có thể không ngờ tới

Hãy bắt đầu bằng cách xem nhanh những vấn đề chính mà chúng ta đang giải quyết, sau đó chúng ta sẽ xem xét lần lượt từng vấn đề và xem cách chúng tương tác với nhau và CSS của bạn. Đây có vẻ như là một tập hợp các khái niệm khó hiểu. Khi bạn thực hành viết CSS nhiều hơn, cách thức hoạt động của nó sẽ trở nên rõ ràng hơn đối với bạn

tầng

Xếp tầng biểu định kiểu — ở mức độ rất đơn giản, điều này có nghĩa là nguồn gốc, tầng xếp tầng và thứ tự của các quy tắc CSS đều quan trọng. Khi áp dụng hai quy tắc từ cùng một tầng tầng và cả hai đều có tính đặc hiệu như nhau, quy tắc được xác định cuối cùng trong biểu định kiểu là quy tắc sẽ được sử dụng

Trong ví dụ dưới đây, chúng tôi có hai quy tắc có thể áp dụng cho phần tử

. Nội dung

kết thúc bằng màu xanh lam. Điều này là do cả hai quy tắc đều từ cùng một nguồn, có bộ chọn phần tử giống hệt nhau và do đó, có cùng tính đặc hiệu, nhưng quy tắc cuối cùng trong thứ tự nguồn sẽ thắng

độ đặc hiệu

Tính đặc hiệu là thuật toán mà trình duyệt sử dụng để quyết định giá trị thuộc tính nào được áp dụng cho một phần tử. Nếu nhiều khối kiểu có các bộ chọn khác nhau định cấu hình cùng một thuộc tính với các giá trị khác nhau và nhắm mục tiêu cùng một phần tử, thì tính đặc hiệu sẽ quyết định giá trị thuộc tính được áp dụng cho phần tử. Tính đặc hiệu về cơ bản là thước đo mức độ cụ thể của lựa chọn của bộ chọn

  • Bộ chọn phần tử ít cụ thể hơn;
  • Bộ chọn lớp cụ thể hơn;

Dưới đây, chúng ta lại có hai quy tắc có thể áp dụng cho phần tử

. Nội dung

bên dưới kết thúc bằng màu đỏ vì bộ chọn lớp main-heading cung cấp cho quy tắc của nó độ đặc hiệu cao hơn. Vì vậy, mặc dù quy tắc có bộ chọn phần tử

xuất hiện xa hơn trong thứ tự nguồn, nhưng quy tắc có độ đặc hiệu cao hơn, được xác định bằng bộ chọn lớp, sẽ được áp dụng

Chúng tôi sẽ giải thích thuật toán cụ thể sau

Di sản

Tính kế thừa cũng cần được hiểu trong ngữ cảnh này — một số giá trị thuộc tính CSS được đặt trên các phần tử cha được kế thừa bởi các phần tử con của chúng và một số thì không

Ví dụ: nếu bạn đặt colorfont-family trên một phần tử, thì mọi phần tử bên trong phần tử đó cũng sẽ được tạo kiểu với màu và phông chữ đó, trừ khi bạn đã áp dụng trực tiếp các giá trị phông chữ và màu khác cho chúng

Một số thuộc tính không kế thừa — ví dụ: nếu bạn đặt width là 50% cho một phần tử, thì tất cả phần tử con của phần tử đó không có chiều rộng bằng 50% chiều rộng của phần tử gốc. Nếu đây là trường hợp, CSS sẽ rất khó sử dụng

Ghi chú. Trên các trang tham chiếu thuộc tính MDN CSS, bạn có thể tìm thấy hộp thông tin kỹ thuật có tên "Định nghĩa chính thức", liệt kê một số điểm dữ liệu về thuộc tính đó, bao gồm cả việc nó có được kế thừa hay không. Xem thuộc tính màu phần Định nghĩa chính thức làm ví dụ

Hiểu cách các khái niệm hoạt động cùng nhau

Ba khái niệm này (xếp tầng, tính đặc hiệu và tính kế thừa) cùng nhau kiểm soát CSS nào áp dụng cho phần tử nào. Trong các phần bên dưới, chúng ta sẽ xem cách chúng hoạt động cùng nhau. Đôi khi nó có vẻ hơi phức tạp, nhưng bạn sẽ bắt đầu nhớ chúng khi có nhiều kinh nghiệm hơn với CSS và bạn luôn có thể tra cứu chi tiết nếu quên. Ngay cả các nhà phát triển có kinh nghiệm cũng không nhớ tất cả các chi tiết

Video sau đây cho biết cách bạn có thể sử dụng Firefox DevTools để kiểm tra tầng trang, tính đặc hiệu, v.v.

Hiểu thừa kế

Chúng ta sẽ bắt đầu với thừa kế. Trong ví dụ bên dưới, chúng ta có một phần tử

0 với hai cấp danh sách không có thứ tự được lồng bên trong nó. Chúng tôi đã cung cấp cho

0 bên ngoài một đường viền, phần đệm và màu phông chữ

Tài sản color là tài sản được thừa kế. Vì vậy, giá trị thuộc tính color được áp dụng cho các phần tử con trực tiếp và cả các phần tử con gián tiếp — các phần tử con trực tiếp

4 và những phần tử bên trong danh sách lồng nhau đầu tiên. Sau đó, chúng tôi đã thêm lớp

5 vào danh sách lồng nhau thứ hai và áp dụng một màu khác cho nó. Điều này sau đó kế thừa qua con cái của nó

Các tài sản như width (như đã đề cập trước đó),

7,

8 và

9 không phải là tài sản kế thừa. Nếu một đường viền được kế thừa bởi các phần tử con trong ví dụ danh sách này, thì mọi danh sách và mục danh sách sẽ có một đường viền — có lẽ không phải là hiệu ứng mà chúng ta muốn

Mặc dù mọi trang thuộc tính CSS đều liệt kê xem thuộc tính có được kế thừa hay không, nhưng bạn thường có thể đoán tương tự bằng trực giác nếu bạn biết giá trị thuộc tính sẽ định kiểu theo khía cạnh nào

Kiểm soát thừa kế

CSS cung cấp năm giá trị thuộc tính phổ quát đặc biệt để kiểm soát tính kế thừa. Mọi thuộc tính CSS đều chấp nhận các giá trị này

class0

Đặt giá trị thuộc tính được áp dụng cho một phần tử được chọn giống với giá trị của phần tử cha của nó. Thực tế, điều này "bật kế thừa"

class1

Đặt giá trị thuộc tính được áp dụng cho phần tử đã chọn thành giá trị ban đầu của thuộc tính đó

class2

Đặt lại giá trị thuộc tính được áp dụng cho một phần tử đã chọn về kiểu dáng mặc định của trình duyệt thay vì giá trị mặc định được áp dụng cho thuộc tính đó. Giá trị này hoạt động như class3 trong nhiều trường hợp

class4

Đặt lại giá trị thuộc tính được áp dụng cho một thành phần đã chọn thành giá trị được thiết lập trong tầng tầng trước đó

class3

Đặt lại tài sản về giá trị tự nhiên của nó, có nghĩa là nếu tài sản được thừa kế một cách tự nhiên thì nó hoạt động như class0, nếu không thì nó hoạt động như class1

Ghi chú. Xem các loại Nguồn gốc trong Giới thiệu CSS Cascade để biết thêm thông tin về từng loại này và cách chúng hoạt động

Chúng ta có thể xem danh sách các liên kết và khám phá cách các giá trị phổ quát hoạt động. Ví dụ trực tiếp bên dưới cho phép bạn chơi với CSS và xem điều gì sẽ xảy ra khi bạn thực hiện thay đổi. Chơi với mã thực sự là cách tốt nhất để hiểu rõ hơn về HTML và CSS

Ví dụ

  1. Mục danh sách thứ hai có lớp class8 được áp dụng. Điều này đặt màu của phần tử class9 được lồng bên trong thành class0. Nếu bỏ rule thì nó đổi màu link như thế nào?
  2. Bạn có hiểu tại sao liên kết thứ ba và thứ tư lại có màu như vậy không? . Thứ tư được đặt thành class3, có nghĩa là văn bản liên kết sử dụng màu của phần tử gốc, màu xanh lá cây
  3. Liên kết nào sẽ đổi màu nếu bạn xác định màu mới cho phần tử class9 — ví dụ như

    4?

  4. Sau khi đọc phần tiếp theo về đặt lại tất cả các thuộc tính, hãy quay lại và thay đổi thuộc tính color thành

    6. Lưu ý cách liên kết thứ hai nằm trên một dòng mới và có dấu đầu dòng. Bạn nghĩ tài sản nào được thừa hưởng?

Đặt lại tất cả các giá trị thuộc tính

Thuộc tính tốc ký CSS

6 có thể được sử dụng để áp dụng một trong các giá trị kế thừa này cho (gần như) tất cả các thuộc tính cùng một lúc. Giá trị của nó có thể là bất kỳ một trong các giá trị kế thừa (class0, class1, class2, class4, hoặc class3). Đó là một cách thuận tiện để hoàn tác các thay đổi đã thực hiện đối với kiểu để bạn có thể quay lại điểm xuất phát đã biết trước khi bắt đầu các thay đổi mới

Trong ví dụ dưới đây, chúng ta có hai blockquotes. Cái đầu tiên có kiểu dáng được áp dụng cho chính phần tử blockquote. Thứ hai có một lớp được áp dụng cho blockquote, đặt giá trị của

6 thành class3

Hãy thử đặt giá trị của

6 thành một số giá trị có sẵn khác và quan sát xem sự khác biệt là gì

Hiểu về dòng thác

Bây giờ chúng tôi hiểu rằng tính kế thừa là lý do tại sao một đoạn được lồng sâu trong cấu trúc HTML của bạn có cùng màu với CSS được áp dụng cho phần thân. Từ các bài học giới thiệu, chúng ta đã hiểu cách thay đổi CSS được áp dụng cho một thứ gì đó tại bất kỳ điểm nào trong tài liệu — cho dù bằng cách gán CSS cho một phần tử hay bằng cách tạo một lớp. Bây giờ chúng ta sẽ xem cách tầng xác định quy tắc CSS nào áp dụng khi có nhiều hơn một khối kiểu áp dụng cùng một thuộc tính, nhưng với các giá trị khác nhau, cho cùng một phần tử

Có ba yếu tố cần xem xét, được liệt kê ở đây theo thứ tự quan trọng tăng dần. Cái sau lấn át cái trước

  1. Nguồn đặt hàng
  2. độ đặc hiệu
  3. Tầm quan trọng

Chúng tôi sẽ xem xét những điều này để xem cách các trình duyệt tìm ra chính xác CSS nào nên được áp dụng

Nguồn đặt hàng

Chúng ta đã thấy thứ tự nguồn quan trọng như thế nào đối với tầng. Nếu bạn có nhiều quy tắc, tất cả đều có trọng số chính xác như nhau, thì quy tắc nào đứng cuối trong CSS sẽ thắng. Bạn có thể nghĩ về điều này như. quy tắc gần phần tử hơn sẽ ghi đè lên phần tử trước đó cho đến khi phần tử cuối cùng chiến thắng và tạo kiểu cho phần tử

Thứ tự nguồn chỉ quan trọng khi trọng số cụ thể của các quy tắc là như nhau, vì vậy hãy xem xét cụ thể

độ đặc hiệu

Bạn sẽ thường gặp phải tình huống mà bạn biết rằng một quy tắc xuất hiện sau trong biểu định kiểu, nhưng một quy tắc mâu thuẫn trước đó lại được áp dụng. Điều này xảy ra bởi vì quy tắc trước đó có tính đặc hiệu cao hơn — nó cụ thể hơn và do đó, đang được trình duyệt chọn làm quy tắc nên tạo kiểu cho phần tử

Như chúng ta đã thấy trước đó trong bài học này, bộ chọn lớp có trọng số lớn hơn bộ chọn phần tử, vì vậy các thuộc tính được xác định trong khối kiểu lớp sẽ ghi đè lên các thuộc tính được xác định trong khối kiểu phần tử

Một điều cần lưu ý ở đây là mặc dù chúng ta đang nghĩ về bộ chọn và các quy tắc được áp dụng cho văn bản hoặc thành phần mà chúng chọn, nhưng không phải toàn bộ quy tắc bị ghi đè, chỉ các thuộc tính được khai báo ở nhiều nơi

Hành vi này giúp tránh lặp lại trong CSS của bạn. Một thực tế phổ biến là xác định các kiểu chung cho các phần tử cơ bản, sau đó tạo các lớp cho các phần tử khác nhau. Ví dụ: trong biểu định kiểu bên dưới, chúng tôi đã xác định các kiểu chung cho các tiêu đề cấp 2, sau đó tạo một số lớp chỉ thay đổi một số thuộc tính và giá trị. Các giá trị được xác định ban đầu được áp dụng cho tất cả các tiêu đề, sau đó các giá trị cụ thể hơn được áp dụng cho các tiêu đề với các lớp

Bây giờ chúng ta hãy xem trình duyệt sẽ tính toán độ đặc hiệu như thế nào. Chúng ta đã biết rằng một bộ chọn phần tử có độ đặc hiệu thấp và có thể bị ghi đè bởi một lớp. Về cơ bản, một giá trị tính bằng điểm được trao cho các loại bộ chọn khác nhau và việc cộng những điểm này sẽ mang lại cho bạn trọng số của bộ chọn cụ thể đó, sau đó có thể được đánh giá dựa trên các kết quả phù hợp tiềm năng khác

Mức độ cụ thể của bộ chọn được đo bằng cách sử dụng ba giá trị (hoặc thành phần) khác nhau, có thể được coi là các cột ID, LỚP và THÀNH PHẦN ở vị trí hàng trăm, hàng chục và hàng đơn vị

  • định danh. Điểm một trong cột này cho mỗi bộ chọn ID có trong bộ chọn tổng thể
  • Các lớp học. Điểm một trong cột này cho mỗi bộ chọn lớp, bộ chọn thuộc tính hoặc lớp giả có trong bộ chọn tổng thể
  • yếu tố. Điểm một trong cột này cho mỗi bộ chọn phần tử hoặc phần tử giả có trong bộ chọn tổng thể

Ghi chú. Bộ chọn chung (

6), bộ chọn tổ hợp (

7,

8,

9, '') và bộ chọn điều chỉnh độ đặc hiệu (main-heading0) không ảnh hưởng đến độ đặc hiệu

Bản thân các lớp giả phủ định (main-heading1) và các lớp giả phù hợp-bất kỳ (main-heading2) không ảnh hưởng đến tính đặc hiệu, nhưng các tham số của chúng thì có. Tính đặc hiệu mà mỗi yếu tố đóng góp cho thuật toán tính đặc hiệu là tính đặc hiệu của bộ chọn trong tham số có trọng số lớn nhất

Bảng sau đây cho thấy một vài ví dụ riêng biệt để giúp bạn có tâm trạng. Hãy thử xem qua những điều này và đảm bảo rằng bạn hiểu lý do tại sao chúng có tính đặc hiệu mà chúng tôi đã cung cấp cho chúng. Chúng tôi chưa trình bày chi tiết về bộ chọn, nhưng bạn có thể tìm thấy thông tin chi tiết về từng bộ chọn trên tài liệu tham khảo về bộ chọn MDN

SelectorIdentifiersClassesElementsTotal specificitymain-heading30010-0-1main-heading40030-0-3main-heading50220-2-2main-heading61001-0-0main-heading7)1011-0-1

Trước khi tiếp tục, hãy xem một ví dụ đang hoạt động

Vì vậy, những gì đang xảy ra ở đây?

  • Hai bộ chọn đầu tiên đang cạnh tranh về kiểu dáng màu nền của liên kết. Cái thứ hai thắng và làm cho nền có màu xanh lam vì nó có thêm bộ chọn ID trong chuỗi. tính đặc hiệu của nó là 2-0-1 so với. 1-0-1
  • Bộ chọn 3 và 4 đang cạnh tranh về kiểu dáng màu văn bản của liên kết. Cái thứ hai thắng và làm cho văn bản có màu trắng vì mặc dù nó có ít bộ chọn phần tử hơn, nhưng bộ chọn bị thiếu được đổi chỗ cho bộ chọn lớp, có trọng lượng lớn hơn bộ chọn phần tử vô cực. Tỷ số chiến thắng cụ thể là 1-1-3 vs. 1-0-4
  • Bộ chọn 5–7 đang cạnh tranh về kiểu dáng đường viền của liên kết khi được di chuột qua. Bộ chọn 6 rõ ràng thua bộ chọn 5 với độ đặc hiệu là 0-2-3 so với. 0-2-4; . Tuy nhiên, bộ chọn 7 đánh bại cả bộ chọn 5 và 6 vì nó có cùng số lượng bộ chọn phụ trong chuỗi với bộ chọn 5, nhưng một phần tử đã được hoán đổi cho bộ chọn lớp. Vì vậy, đặc điểm chiến thắng là 0-3-3 vs. 0-2-3 và 0-2-4

Ghi chú. Mỗi loại bộ chọn có mức độ đặc hiệu riêng không thể bị ghi đè bởi bộ chọn có mức độ đặc hiệu thấp hơn. Ví dụ: một triệu bộ chọn lớp được kết hợp sẽ không thể ghi đè lên tính đặc hiệu của một bộ chọn id

Cách tốt nhất để đánh giá tính đặc hiệu là cho điểm từng mức độ đặc hiệu bắt đầu từ mức cao nhất và chuyển sang mức thấp nhất khi cần thiết. Chỉ khi có sự ràng buộc giữa các điểm của bộ chọn trong một cột về độ đặc hiệu thì bạn mới cần đánh giá thấp hơn cột tiếp theo;

kiểu nội tuyến

Kiểu nội tuyến, nghĩa là khai báo kiểu bên trong thuộc tính main-heading8, được ưu tiên hơn tất cả các kiểu thông thường, bất kể tính đặc hiệu. Các khai báo như vậy không có bộ chọn, nhưng tính đặc hiệu của chúng có thể được hiểu là 1-0-0-0;

quan trọng

Có một đoạn CSS đặc biệt mà bạn có thể sử dụng để ghi đè lên tất cả các tính toán ở trên, thậm chí cả các kiểu nội tuyến - cờ main-heading9. Tuy nhiên, bạn nên hết sức cẩn thận trong khi sử dụng. Cờ này được sử dụng để tạo một cặp thuộc tính và giá trị riêng lẻ thành quy tắc cụ thể nhất, do đó sẽ ghi đè các quy tắc thông thường của tầng, bao gồm các kiểu nội tuyến thông thường

Ghi chú. Thật hữu ích khi biết rằng cờ main-heading9 tồn tại để bạn biết nó là gì khi bạn bắt gặp nó trong mã của người khác. Tuy nhiên, chúng tôi thực sự khuyên bạn không bao giờ sử dụng nó trừ khi bạn thực sự phải. Cờ main-heading9 thay đổi cách thức hoạt động bình thường của tầng, do đó, nó có thể khiến việc gỡ lỗi các vấn đề CSS thực sự khó giải quyết, đặc biệt là trong một biểu định kiểu lớn

Hãy xem ví dụ này, nơi chúng tôi có hai đoạn văn, một trong số đó có ID

Hãy xem qua phần này để xem điều gì đang xảy ra — hãy thử xóa một số thuộc tính để xem điều gì sẽ xảy ra nếu bạn cảm thấy khó hiểu

  1. Bạn sẽ thấy rằng các giá trị color

    8 của quy tắc thứ ba đã được áp dụng, nhưng

    4 thì không. Tại sao?

  2. Tuy nhiên, các quy tắc ở trên nó thắng vì bộ chọn lớp có tính đặc hiệu cao hơn bộ chọn phần tử
  3. Cả hai phần tử đều có class của

    6, nhưng phần tử thứ 2 cũng có

    7 của

    8. Vì các ID thậm chí còn có tính đặc hiệu cao hơn so với các lớp (bạn chỉ có thể có một phần tử với mỗi ID duy nhất trên một trang, nhưng nhiều phần tử có cùng một lớp — bộ chọn ID rất cụ thể cho những gì chúng nhắm mục tiêu), màu nền đỏ và 1px

  4. Phần tử thứ 2 có màu nền đỏ nhưng không có viền. Tại sao? . Thêm cờ main-heading9 sau color1 có nghĩa là khai báo này sẽ thắng giá trị

    9 trong quy tắc trước đó, mặc dù bộ chọn ID có độ đặc hiệu cao hơn

Ghi chú. Cách duy nhất để ghi đè một khai báo quan trọng là đưa một khai báo quan trọng khác có cùng tính đặc hiệu vào sau trong thứ tự nguồn hoặc một khai báo có tính đặc hiệu cao hơn hoặc bao gồm một khai báo quan trọng trong lớp xếp tầng trước đó (chúng tôi chưa đề cập đến các lớp xếp tầng

Một tình huống mà bạn có thể phải sử dụng cờ main-heading9 là khi bạn đang làm việc trên một CMS mà bạn không thể chỉnh sửa các mô-đun CSS cốt lõi và bạn thực sự muốn ghi đè một kiểu nội tuyến hoặc một khai báo quan trọng mà không thể ghi đè . Nhưng thực sự, không sử dụng nó nếu bạn có thể tránh nó

Ảnh hưởng của vị trí CSS

Cuối cùng, điều quan trọng cần lưu ý là thứ tự ưu tiên của một khai báo CSS phụ thuộc vào biểu định kiểu và lớp tầng mà nó được chỉ định trong

Người dùng có thể đặt biểu định kiểu tùy chỉnh để ghi đè kiểu của nhà phát triển. Ví dụ: người dùng khiếm thị có thể muốn đặt kích thước phông chữ trên tất cả các trang web họ truy cập gấp đôi kích thước bình thường để cho phép đọc dễ dàng hơn

Cũng có thể khai báo các kiểu nhà phát triển trong các lớp xếp tầng. bạn có thể tạo các kiểu không phân lớp ghi đè các kiểu được khai báo trong các lớp hoặc bạn có thể tạo các kiểu được khai báo ở các lớp sau ghi đè các kiểu từ các lớp đã khai báo trước đó. Ví dụ: với tư cách là nhà phát triển, bạn không thể chỉnh sửa biểu định kiểu của bên thứ ba, nhưng bạn có thể nhập biểu định kiểu bên ngoài vào lớp xếp tầng để tất cả các kiểu của bạn dễ dàng ghi đè lên các kiểu đã nhập mà không phải lo lắng về tính đặc hiệu của bộ chọn bên thứ ba

Thứ tự khai báo ghi đè

Các khai báo xung đột sẽ được áp dụng theo thứ tự sau, những khai báo sau sẽ ghi đè lên những khai báo trước đó

  1. Tuyên bố trong biểu định kiểu tác nhân người dùng (e. g. , kiểu mặc định của trình duyệt, được sử dụng khi không có kiểu nào khác được đặt)
  2. Khai báo bình thường trong biểu định kiểu người dùng (kiểu tùy chỉnh do người dùng đặt)
  3. Các khai báo thông thường trong biểu định kiểu của tác giả (đây là các kiểu do chúng tôi, các nhà phát triển web, đặt)
  4. Các khai báo quan trọng trong biểu định kiểu tác giả
  5. Các khai báo quan trọng trong biểu định kiểu người dùng
  6. Các khai báo quan trọng trong biểu định kiểu tác nhân người dùng

Ghi chú. Thứ tự ưu tiên bị đảo ngược đối với các kiểu được gắn cờ bằng main-heading9. Các biểu định kiểu của nhà phát triển web sẽ ghi đè lên các biểu định kiểu của người dùng, vì vậy thiết kế có thể được giữ nguyên như dự kiến;

Thứ tự các lớp thác

Mặc dù các lớp xếp tầng là một chủ đề nâng cao và bạn có thể không sử dụng tính năng này ngay lập tức, điều quan trọng là phải hiểu cách các lớp xếp tầng

Khi bạn khai báo CSS trong các lớp xếp tầng, thứ tự ưu tiên được xác định theo thứ tự khai báo các lớp. Các kiểu CSS được khai báo bên ngoài bất kỳ lớp nào được kết hợp với nhau, theo thứ tự mà các kiểu đó được khai báo, thành một lớp không tên, như thể đó là lớp được khai báo cuối cùng. Với các kiểu bình thường (không quan trọng) cạnh tranh, các lớp sau được ưu tiên hơn các lớp được xác định trước đó. Tuy nhiên, đối với các kiểu được gắn cờ main-heading9, thứ tự sẽ bị đảo ngược, với các kiểu quan trọng trong các lớp trước được ưu tiên hơn các kiểu quan trọng được khai báo trong các lớp tiếp theo hoặc bên ngoài bất kỳ lớp nào. Kiểu nội tuyến được ưu tiên hơn tất cả các kiểu tác giả, bất kể lớp nào

Khi bạn có nhiều khối kiểu trong các lớp khác nhau cung cấp các giá trị cạnh tranh cho một thuộc tính trên một phần tử, thì lớp trong đó các kiểu được khai báo sẽ xác định mức độ ưu tiên. Tính đặc hiệu giữa các lớp không thành vấn đề, nhưng tính đặc hiệu trong một lớp thì vẫn có

Hãy thảo luận một số điều từ ví dụ trên để hiểu điều gì đang xảy ra. Hai lớp đã được khai báo, color7 và color8, theo thứ tự đó. Mặc dù tính đặc hiệu trong color8 là cao nhất nhưng không có thuộc tính nào từ khai báo đó được sử dụng. Tại sao?

Nếu bạn thay đổi dòng CSS đầu tiên trong ví dụ này thành font-family0, bạn sẽ thay đổi thứ tự khai báo lớp và tất cả các kiểu quan trọng từ color7 sẽ được thay đổi thành các giá trị tương ứng của chúng trong color8

Kiểm tra kỹ năng của bạn

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . thác nước

Bản tóm tắt

Nếu bạn đã hiểu hầu hết bài viết này, thì bạn đã hoàn thành xuất sắc — bạn đã bắt đầu làm quen với các cơ chế cơ bản của CSS. Tiếp theo, chúng ta sẽ xem xét chi tiết các bộ chọn

Nếu bạn chưa hiểu đầy đủ về tầng, tính đặc hiệu và tính kế thừa, thì đừng lo lắng. Đây chắc chắn là điều phức tạp nhất mà chúng tôi đã đề cập cho đến nay trong khóa học và là điều mà ngay cả các nhà phát triển web chuyên nghiệp đôi khi cũng thấy khó khăn. Chúng tôi khuyên bạn nên quay lại bài viết này một vài lần khi tiếp tục khóa học và tiếp tục suy nghĩ về nó

Tham khảo lại tại đây nếu bạn bắt đầu gặp sự cố lạ với các kiểu không áp dụng như mong đợi. Nó có thể là một vấn đề cụ thể

Bạn có thể thay đổi lớp CSS bằng JavaScript không?

Với JavaScript, chúng tôi có thể đặt kiểu CSS cho một hoặc nhiều thành phần trong DOM , sửa đổi, xóa chúng hoặc thậm chí thay đổi toàn bộ biểu định kiểu cho tất cả trang của bạn.

Bạn có thể thao tác CSS bằng JavaScript không?

Giờ đây, JavaScript là một ngôn ngữ mạnh mẽ, do đó, chúng ta không chỉ có thể thao tác với các phần tử HTML bằng nó mà còn chúng ta còn có thể sử dụng nó để thao tác với các thuộc tính CSS của bất kỳ trang web nào.

Ghi đè CSS là gì?

Bạn có thể đã áp dụng khái niệm ưu tiên trong nhiều lĩnh vực của cuộc sống, tôi. e. , ưu tiên công việc, nhà cửa và những thứ cá nhân của bạn. Trong lập trình HTML, trình duyệt cần dự đoán mức độ ưu tiên của các phần tử hoặc hướng dẫn để hiển thị tương ứng . Khái niệm này được gọi là “CSS Override”.