외부 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및 인라인 스타일을 모두 피해야합니다 .

• !importantCSS 규칙에 키워드를 추가하면 해당 요소에 대한 다른 모든 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-attr와 CSS 선택기를 !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/

사용되는 !importantCSS 속성에

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

div {
        color: blue !important;
    }