CSS ghi đè kiểu nội tuyến mà không quan trọng

Question

Đây là câu hỏi cứ lởn vởn trong đầu bạn trong những phút vừa rồi bạn-nói-bao-giờ. Làm cách nào để bạn ngăn một thuộc tính CSS bị ghi đè bởi các thuộc tính CSS khác?

Nội dung chính Show

Tại sao thuộc tính CSS của bạn bị ghi đè
Độ đặc hiệu của bộ chọn
Nhúng/Liên kết so với. CSS nội tuyến
Bạn có thể ghi đè quy tắc CSS bằng. quan trọng?
Bạn có thể ghi đè CSS nội tuyến mà không cần. từ khóa quan trọng?
Cách tìm quy tắc CSS nào đang ghi đè lên quy tắc của bạn
Tóm lại là
Làm cách nào để ghi đè kiểu nội tuyến trong CSS mà không cần sử dụng quan trọng?
Việc ghi đè CSS nội tuyến có quan trọng không?
Làm cách nào để ghi đè CSS không quan trọng?
Chúng tôi có thể ghi đè CSS nội tuyến không?

Một câu hỏi hay cho một vấn đề có vẻ đơn giản. Tuy nhiên, một câu hỏi có thể khó trả lời một cách khó chịu, đặc biệt nếu bạn là người mới sử dụng CSS và bạn không biết rõ về ngôn ngữ biểu định kiểu này

Vì vậy thật tốt khi bạn dừng lại ở đây. Bởi vì, với tư cách là người đã viết những dòng CSS đầu tiên của mình vào năm 2007 và đã giải quyết vấn đề này nhiều lần kể từ đó, tôi sẽ chỉ cho bạn cách khắc phục và khắc phục sự cố

Đọc tiếp bên dưới

Tại sao thuộc tính CSS của bạn bị ghi đè

Có một số lý do khiến một thuộc tính CSS có thể bị một thuộc tính CSS khác ghi đè. Và chúng phát sinh từ cách CSS xử lý các khai báo xung đột cho cùng một thuộc tính của một phần tử DOM nhất định

Độ đặc hiệu của bộ chọn

Chín trong số mười lần, khi quy tắc CSS của bạn bị ghi đè bởi một quy tắc khác ở đâu đó trong biểu định kiểu của tài liệu HTML, thì vấn đề là bộ chọn CSS của bạn không đủ cụ thể

Bối rối?

Tôi biết mình là ai khi lần đầu tiên bắt đầu học Cascading Style Sheets. Tuy nhiên, hãy để tôi giải thích;

Khi nhiều quy tắc nhắm mục tiêu các thuộc tính giống nhau của cùng một phần tử DOM trong CSS, quy tắc cụ thể hơn của hai quy tắc sẽ chiếm ưu thế—và quy tắc còn lại sẽ bị ghi đè

Hãy xem xét một ví dụ

Giả sử chúng ta có một tài liệu HTML với đánh dấu sau

<html>
    <head>
        <style type="text/css">
            /* CSS style sheet goes here */
        </style>
    </head>
    <body id="page-1" class="page">
        <p>This is just a paragraph</p>
    </body>
</html>

Trong biểu định kiểu CSS của tài liệu HTML, chúng ta sẽ nhắm mục tiêu thuộc tính nền của phần tử <body> bằng nhiều quy tắc CSS, mỗi quy tắc sẽ ghi đè lên quy tắc kia vì quy tắc này cụ thể hơn

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

Nếu bạn sao chép/dán mã nguồn ở trên vào CodePen, bạn sẽ thấy phần tử <body> có nền màu vàng

Bắt đầu xóa từng quy tắc CSS từ dưới lên và nền của phần tử <body> chuyển sang màu lam, sau đó là xanh lục và cuối cùng là màu đỏ, tất cả là nhờ tính đặc hiệu của bộ chọn CSS của chúng tôi

Vậy bí quyết rút ra ở đây là gì?

Nếu bạn đang cố gắng gán giá trị cho thuộc tính CSS của phần tử DOM, nhưng nó vẫn bị các quy tắc CSS khác ghi đè, hãy kiểm tra xem liệu các quy tắc đó có nhiều bộ chọn cụ thể hơn của bạn không

Và nếu có, hãy làm cho bộ chọn CSS của bạn trở nên cụ thể nhất trong số chúng. Làm điều này sẽ giải quyết vấn đề của bạn miễn là tính đặc hiệu là nguyên nhân gây ra sự cố ngay từ đầu

Nhúng/Liên kết so với. CSS nội tuyến

Như bạn có thể biết bây giờ, có ba cách để thêm biểu định kiểu CSS vào tài liệu HTML. Bạn có thể

Nhúng nó vào thẻ <style>
Liên kết với nó trong thẻ <link> trong phần đầu của tài liệu HTML của bạn

Nội tuyến nó bằng cách thêm nó dưới dạng thuộc tính

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

0 cho mỗi và mọi phần tử HTML

Quy tắc chung là các quy tắc CSS nội tuyến được ưu tiên hơn các quy tắc CSS trong biểu định kiểu được nhúng hoặc liên kết, trừ khi các thuộc tính trong các quy tắc đó được khai báo bằng từ khóa

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

1

Từ khóa

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

1 làm cho một thuộc tính trong quy tắc CSS trở nên quan trọng và nó sẽ ghi đè bất kỳ thuộc tính nào được khai báo mà không có từ khóa đó, vốn được coi là bình thường

Nói cách khác, trong phần đánh dấu HTML bên dưới

<html>
    <head>
        <style type="text/css">
            /* CSS style sheet goes here */
            
            p {
                color: blue;
            }
        </style>
    </head>
    <body>
        <p style="color: red;">This is just a paragraph</p>
    </body>
</html>

Văn bản trong phần tử

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

3 sẽ có màu đỏ vì quy tắc CSS nội tuyến (

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

4) được ưu tiên hơn quy tắc CSS khác (

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

5) trong biểu định kiểu được nhúng

Nhưng nếu chúng ta thêm từ khóa

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

1 vào quy tắc CSS đó

<html>
    <head>
        <style type="text/css">
            /* CSS style sheet goes here */
            
            p {
                color: blue !important;
            }
        </style>
    </head>
    <body>
        <p style="color: red;">This is just a paragraph</p>
    </body>
</html>

Bây giờ, văn bản trong phần tử

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

3 sẽ có màu xanh lam vì quy tắc CSS

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

5 được trình duyệt coi là quan trọng và quy tắc CSS

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

4, mặc dù thực tế là nó được đặt trong dòng, được coi là bình thường

Bạn có thể ghi đè quy tắc CSS bằng. quan trọng?

Có, bạn có thể ghi đè quy tắc CSS bằng một hoặc nhiều thuộc tính được khai báo bằng từ khóa

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

1. Để có thể làm được điều này, bạn cần tạo một quy tắc CSS với bộ chọn CSS cụ thể hơn, đồng thời khai báo các thuộc tính đó bằng từ khóa

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

1

Ví dụ: trong biểu định kiểu bên dưới

p {
    color: red !important;
}

body p {
    color: blue !important;
}

Văn bản trong phần tử

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

3 có màu xanh lam vì bộ chọn thứ hai cụ thể hơn phần tử thứ nhất (hãy tự mình xem trực tiếp trên CodePen)

Bạn có thể ghi đè CSS nội tuyến mà không cần. từ khóa quan trọng?

Để cung cấp cho bạn câu trả lời dài ngắn, không. Cách duy nhất để ghi đè quy tắc CSS nội tuyến bằng một quy tắc trong biểu định kiểu CSS được nhúng hoặc liên kết là khai báo các thuộc tính trong biểu định kiểu sau bằng từ khóa

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

1

Có một lý do đơn giản và hợp lý cho tất cả những điều này

Cách duy nhất để ghi đè quy tắc CSS đã được khai báo là sử dụng bộ chọn CSS cụ thể hơn. Và, trong hệ thống phân cấp về tính cụ thể trong CSS, không có bộ chọn nào cụ thể hơn thuộc tính

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

0 của một phần tử DOM

Trên thực tế, thông thường bạn sẽ ghi đè các quy tắc CSS được nhúng hoặc liên kết bằng các quy tắc CSS nội tuyến—chứ không phải ngược lại

Cách tìm quy tắc CSS nào đang ghi đè lên quy tắc của bạn

Nếu bạn là người mới bắt đầu phát triển web, bạn có thể tự hỏi làm thế nào để tìm quy tắc CSS nào đang ghi đè lên quy tắc của bạn ngay từ đầu

Vâng, tôi có tin tốt cho bạn. nó thực sự dễ dàng để làm. Bạn chỉ cần biết nơi để nhấp chuột và những gì để tìm kiếm. Thực hiện theo hướng dẫn từng bước bên dưới để tìm hiểu

Cách tìm các quy tắc CSS xung đột

Sử dụng tab “Inspector” để tìm các quy tắc CSS xung đột

Bước 1. Khởi động trình duyệt web yêu thích của bạn và mở tài liệu HTML mà bạn muốn khắc phục sự cố

Bước 2. Chọn phần tử DOM được đề cập, sau đó nhấp chuột phải vào lựa chọn và nhấp vào “Kiểm tra” để khởi chạy các công cụ dành cho nhà phát triển của trình duyệt của bạn

Bước 3. Trong tab “Kiểu”, hãy lọc thuộc tính CSS đang bị ghi đè và quan sát kết quả. Trình duyệt sẽ hiển thị cho bạn tất cả các quy tắc CSS khai báo giá trị cho thuộc tính này

Tóm lại là

Bây giờ bạn biết phải làm gì khi các thuộc tính trong quy tắc CSS của bạn bị ghi đè. Kiểm tra xem bộ chọn của bạn có phải là bộ chọn cụ thể nhất trong số tất cả các bộ chọn nhắm mục tiêu đến phần tử DOM không

Nếu quy tắc CSS ghi đè quy tắc của bạn được khai báo nội tuyến, trong thuộc tính

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

0 cho phần tử DOM được đề cập, hãy nhớ rằng cách duy nhất để ghi đè quy tắc đó là sử dụng từ khóa

/* CSS style sheet goes here */

body {
    background: red;
}

/* Overrides the more generic CSS rule above */

html body {
    background: green;
}

/* Overrides the two more generic CSS rules above */

body.page {
    background: blue;
}

/* Overrides the three more generic CSS rules above */

body#page-1 {
    background: yellow;
}

1

Làm cách nào để ghi đè kiểu nội tuyến trong CSS mà không cần sử dụng quan trọng?

Cách duy nhất để ghi đè quy tắc CSS mà không cần sử dụng. điều quan trọng là sử dụng bộ chọn cụ thể hơn . Không có bộ chọn nào cụ thể hơn thuộc tính kiểu. Lưu câu trả lời này.

Việc ghi đè CSS nội tuyến có quan trọng không?

Cách tiếp cận. Để ghi đè CSS nội tuyến,. từ khóa quan trọng được sử dụng . Điều này làm cho thuộc tính CSS đứng trước tất cả các thuộc tính CSS khác cho phần tử đó.

Làm cách nào để ghi đè CSS không quan trọng?

Cách duy nhất để ghi đè lên một. quy tắc quan trọng là bao gồm một quy tắc khác. quy tắc quan trọng về khai báo có cùng độ đặc hiệu (hoặc cao hơn) trong mã nguồn - và vấn đề bắt đầu từ đây. Điều này làm cho mã CSS trở nên khó hiểu và việc gỡ lỗi sẽ khó khăn, đặc biệt nếu bạn có một biểu định kiểu lớn.

Chúng tôi có thể ghi đè CSS nội tuyến không?

Bằng cách sử dụng tham số [style] với bộ chọn trong biểu định kiểu CSS, bạn hoàn toàn có thể ghi đè bất kỳ kiểu nội tuyến nào có thể có trong HTML của mình .

programming css