Làm cách nào để ghi đè các kiểu nội tuyến bằng CSS bên ngoài?

Tôi có đánh dấu sử dụng kiểu nội tuyến, nhưng tôi không có quyền truy cập để thay đổi đánh dấu này. Làm cách nào để ghi đè các kiểu nội tuyến trong tài liệu chỉ sử dụng CSS? Tôi không muốn sử dụng jQuery hoặc JavaScript.

HTML:

<div style="font-size: 18px; color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

CSS:

div {
   color: blue; 
   /* This Isn't Working */
}

Cách duy nhất để ghi đè kiểu nội tuyến là sử dụng !importanttừ khóa bên cạnh quy tắc CSS. Sau đây là một ví dụ về nó.

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }

<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

Lưu ý quan trọng:

• Sử dụng !importantkhông được coi là một thực hành tốt . Do đó, bạn nên tránh cả hai !importantvà kiểu nội tuyến.

• Việc thêm !importanttừ khóa vào bất kỳ quy tắc CSS nào sẽ cho phép quy tắc đó đứng trước bắt buộc so với tất cả các quy tắc CSS khác cho phần tử đó.

• Nó thậm chí còn ghi đè các kiểu nội tuyến từ đánh dấu.

• Cách duy nhất để ghi đè là sử dụng một !importantquy tắc khác , được khai báo với độ đặc hiệu CSS cao hơn trong CSS hoặc độ cụ thể CSS bằng nhau sau này trong mã.

• Phải đọc - Đặc tính CSS theo MDN 🔗

inline-stylestrong một tài liệu có mức độ ưu tiên cao nhất, vì vậy, ví dụ: nếu bạn muốn thay đổi màu của một divphần tử thành blue, nhưng bạn inline stylecó một thuộc colortính được đặt thànhred

<div style="font-size: 18px; color: red;">
   Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue; 
   /* This Won't Work, As Inline Styles Have Color Red And As 
      Inline Styles Have Highest Priority, We Cannot Over Ride 
      The Color Using An Element Selector */
}

Vì vậy, tôi có nên sử dụng jQuery / Javascript không? - Câu trả lời là KHÔNG

Chúng ta có thể sử dụng element-attrBộ chọn CSS với !important, lưu ý, !importantđiều quan trọng ở đây là quan trọng, nếu không nó sẽ không chạy quá các kiểu nội tuyến ..

<div style="font-size: 30px; color: red;">
    This is a test to see whether the inline styles can be over ridden with CSS?
</div>

div[style] {
   font-size: 12px !important;
   color: blue !important;
}

Bản giới thiệu

Lưu ý: Sử dụng !importantCHỈ sẽ hoạt động ở đây, nhưng tôi đã sử dụng div[style]bộ chọn để chọn cụ thể divcó style thuộc tính

Bạn có thể dễ dàng ghi đè kiểu nội tuyến ngoại trừ !importantkiểu nội tuyến

vì thế

<div style="font-size: 18px; color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue !important; 
   /* This will  Work */
}

nhưng nếu bạn có

<div style="font-size: 18px; color: red !important;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue !important; 
   /* This Isn't Working */
}

bây giờ nó sẽ redchỉ là .. và bạn không thể ghi đè nó

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

div[style] {
   background: yellow !important;
}

Dưới đây là liên kết để biết thêm chi tiết: http://css-tricks.com/override-inline-styles-with-css/

được sử dụng !importanttrong thuộc tính CSS

<div style="color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
        color: blue !important;
    }