Bagaimana cara mengganti gaya sebaris dengan CSS eksternal?

Saya memiliki markup yang menggunakan gaya sebaris, tetapi saya tidak memiliki akses untuk mengubah markup ini. Bagaimana cara mengganti gaya sebaris dalam dokumen hanya menggunakan CSS? Saya tidak ingin menggunakan jQuery atau 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 */
}

Satu-satunya cara untuk menimpa gaya sebaris adalah dengan menggunakan !importantkata kunci disamping aturan CSS. Berikut adalah contohnya.

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>

Catatan penting:

• Menggunakan !importanttidak dianggap sebagai praktik yang baik . Karenanya, Anda harus menghindari keduanya !importantdan gaya sebaris.

• Menambahkan !importantkata kunci ke aturan CSS mana pun memungkinkan aturan tersebut secara paksa mendahului semua aturan CSS lainnya untuk elemen itu.

• Itu bahkan menimpa gaya sebaris dari markup.

• Satu-satunya cara untuk menimpa adalah dengan menggunakan !importantaturan lain , yang dideklarasikan dengan spesifikasi CSS yang lebih tinggi di CSS, atau dengan spesifikasi CSS yang sama di kemudian hari dalam kode.

• Harus Dibaca - Kekhususan CSS oleh MDN 🔗

inline-stylesdalam dokumen memiliki prioritas tertinggi, jadi misalnya katakanlah jika Anda ingin mengubah warna dari divelemen blue, tapi kau seorang inline styledengan colorset properti untukred

<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 */
}

Jadi, Haruskah Saya Menggunakan jQuery / Javascript? - Jawaban TIDAK

Kita bisa menggunakan element-attrCSS Selector dengan !important, perhatikan, !importantini penting, kalau tidak itu tidak akan melebihi gaya sebaris ..

<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;
}

Demo

Catatan: Menggunakan !importantHANYA akan berfungsi di sini, tetapi saya telah menggunakan div[style]selektor untuk secara khusus memilih divmemiliki style atribut

Anda dapat dengan mudah mengganti gaya sebaris kecuali !importantgaya sebaris

begitu

<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 */
}

tetapi jika Anda punya

<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 */
}

sekarang hanya akan red.. dan Anda tidak dapat menimpanya

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

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

Di bawah ini adalah tautan untuk detail lebih lanjut: http://css-tricks.com/override-inline-styles-with-css/

digunakan !importantdalam properti CSS

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

div {
        color: blue !important;
    }