ฉันจะแทนที่สไตล์อินไลน์ด้วย CSS ภายนอกได้อย่างไร

ฉันมีมาร์กอัปที่ใช้รูปแบบอินไลน์ แต่ฉันไม่มีสิทธิ์เปลี่ยนมาร์กอัปนี้ ฉันจะแทนที่สไตล์อินไลน์ในเอกสารโดยใช้ CSS เพียงอย่างเดียวได้อย่างไร ฉันไม่ต้องการใช้ jQuery หรือ 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 */
}

วิธีเดียวที่จะลบล้างสไตล์อินไลน์ได้คือการใช้!importantคำสำคัญข้างกฎ CSS ต่อไปนี้เป็นตัวอย่างของมัน

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>

หมายเหตุสำคัญ:

• ใช้!importantไม่ถือเป็นวิธีที่ดี ดังนั้นคุณควรหลีกเลี่ยงทั้ง!importantแบบอินไลน์และแบบอินไลน์

• การเพิ่ม!importantคีย์เวิร์ดลงในกฎ CSS ทำให้กฎมีผลบังคับใช้ก่อนกฎ CSS อื่น ๆ ทั้งหมดสำหรับองค์ประกอบนั้น

• มันยังแทนที่สไตล์อินไลน์จากมาร์กอัป

• วิธีเดียวที่จะลบล้างคือการใช้!importantกฎอื่นซึ่งประกาศด้วยความจำเพาะของ CSS ที่สูงกว่าใน CSS หรือความเฉพาะเจาะจงของ CSS ที่เท่ากันในภายหลังในโค้ด

• ต้องอ่าน - ความจำเพาะของ CSS โดย MDN 🔗

inline-stylesในเอกสารมีลำดับความสำคัญสูงสุดตัวอย่างเช่นหากคุณต้องการเปลี่ยนสีของdivองค์ประกอบblueแต่คุณinline styleมีcolorคุณสมบัติที่ตั้งค่าเป็นred

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

ดังนั้นฉันควรใช้ jQuery / Javascript หรือไม่? - คำตอบคือไม่ใช่

เราสามารถใช้element-attrCSS Selector ด้วย!importantหมายเหตุ!importantเป็นสิ่งสำคัญที่นี่มิฉะนั้นจะไม่ใช้รูปแบบอินไลน์มากเกินไป ..

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

การสาธิต

หมายเหตุ: การใช้!importantเท่านั้นจะใช้ได้ที่นี่ แต่ฉันใช้ div[style]ตัวเลือกเพื่อเลือกเฉพาะdivการมีstyle แอตทริบิวต์

คุณสามารถลบล้างสไตล์อินไลน์ได้อย่างง่ายดายยกเว้น!importantสไตล์อินไลน์

ดังนั้น

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

แต่ถ้าคุณมี

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

ตอนนี้จะเป็นredเพียง .. และคุณไม่สามารถลบล้างได้

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

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

ด้านล่างนี้เป็นลิงค์สำหรับรายละเอียดเพิ่มเติม: http://css-tricks.com/override-inline-styles-with-css/

ใช้!importantในคุณสมบัติ CSS

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

div {
        color: blue !important;
    }