Satır içi stilleri harici CSS ile nasıl geçersiz kılabilirim?

Satır içi stilleri kullanan işaretlemem var, ancak bu işaretlemeyi değiştirme erişimim yok. Yalnızca CSS kullanan bir belgedeki satır içi stilleri nasıl geçersiz kılabilirim? JQuery veya JavaScript kullanmak istemiyorum.

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

Satır içi stili geçersiz kılmanın tek yolu !important, CSS kuralının yanında anahtar kelime kullanmaktır . Aşağıda bunun bir örneği var.

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>

Önemli notlar:

• Kullanmak !importantiyi bir uygulama olarak kabul edilmez . Bu nedenle, hem !importantsatır içi stilden hem de kaçınmalısınız .

• !importantAnahtar kelimeyi herhangi bir CSS kuralına eklemek, kuralın o öğeye ilişkin diğer tüm CSS kurallarının zorla önüne geçmesini sağlar .

• Hatta işaretlemeden gelen satır içi stilleri geçersiz kılar .

• Geçersiz kılmanın tek yolu!important , ya CSS'de daha yüksek CSS özgüllüğüyle ya da kodda daha sonra aynı CSS özgüllüğüyle bildirilen başka bir kural kullanmaktır .

• Okumalısınız - MDN'den CSS Özgüllüğü 🔗

inline-stylesbir belgede en yüksek önceliğe sahiptir, bu nedenle örneğin bir divöğenin rengini olarak değiştirmek istiyorsanız blue, ancak inline stylebir colorözelliğe sahipred

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

Öyleyse, jQuery / Javascript Kullanmalı mıyım? - Cevap HAYIR

element-attrCSS Seçiciyi birlikte kullanabiliriz !important, not !importantburada önemlidir, aksi takdirde satır içi stilleri aşmaz ..

<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

Not: !importantYALNIZCA kullanmak burada işe yarar, ancak div[style]özel olarak divsahip olma style özelliğini seçmek için seçiciyi kullandım

Kolayca satır içi hariç satır içi stil geçersiz kılabilir !importanttarzı

yani

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

ama eğer varsa

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

şimdi redsadece olacak .. ve onu geçersiz kılamazsın

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

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

Daha fazla ayrıntı için bağlantı aşağıdadır: http://css-tricks.com/override-inline-styles-with-css/

!importantCSS özelliğinde kullanılır

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

div {
        color: blue !important;
    }