인라인 CSS 스타일을 무시하는 방법

이 2009 년 기사는 놀랍게도 인기가 남아 있으며 CSS 기초의 지속적인 관련성을 강조합니다. 현대 CSS에 관심이 있으시면 Retina 디스플레이를위한 CSS 기술에 대한 최근 작품을 확인하십시오.

CSS의 힘은 계단식 성격에 있습니다. 브라우저가 스타일을 선택하고 적용하는 방법을 이해하는 것이 중요합니다. 스타일 애플리케이션은 포함 방법, 규칙 순서, 선택기 특이성 및 . html에 직접 정의 된 인라인 스타일 (예 : <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174110413222323.jpg" class="lazy" alt="How to Override Inline CSS Styles "> <strong style="max-width:90%"> 빨간색 텍스트 </strong>

)는 최우선 순위를 갖습니다. 일반적으로 외부 스타일 시트에 유리하게 낙담하지만 레거시 시스템이나 HTML 수정이 제한 될 때 피할 수 없습니다. 외부 스타일 시트에서 인라인 스타일을 무시하려면 !important를 사용하십시오

이것은 인라인 스타일에 관계없이

태그의 텍스트를 파란색으로 강제합니다. 이것은 IE6 및 7을 제외하고 주요 브라우저 (IE8, Firefox 2, Opera 9, Safari, Chrome)에서 작동합니다. 그러나 이것은 최후의 수단이어야합니다. 깨끗한 CSS를 유지하고 필요한 경우 인라인 스타일 만 재정의하십시오. 고급 CSS 기술을위한 SitePoint의 학습 가능한 플랫폼을 탐색하십시오 인라인 CSS를 재정의하는 것에 대한 자주 묻는 질문 (FAQ) <p><strong style="color: red;">red text</strong></p> Q : 인라인 CSS를 무시하는 이유는 무엇입니까?

strong[style] { color: blue !important; }

a : Inline CSS를 재정의하는 CSS 스타일을 간소화하고 재사용 성을 홍보하고 (많은 페이지의 스타일 시트) 스타일 시트 캐싱을 통해 성능을 향상시킵니다.

Q : strong 규칙은 어떻게 작동합니까?

a : 후속 스타일 선언을 무시합니다. 높은 특이성으로 인해 디버깅을 복잡하게하기 때문에 드물게 사용하십시오 (예 : ).

Q : 외부 CSS가 인라인 스타일을 무시할 수 있습니까?

a : 예, 그러나 인라인 스타일은 특이성이 더 높습니다. 외부 CSS의 특이성을 매치하거나 Q : 내 CSS가 인라인 스타일을 우선시하지 않는 이유는 무엇입니까?

A : 인라인 스타일 특이성, 잘못된 CSS 선언 순서 또는 인라인 스타일에서

를 점검하십시오.

Q : CSS 규칙 특이성을 높이는 방법? A :보다 구체적인 선택기 (id & gt; class & gt; type), 체인 선택기 (예 : )를 사용하거나 . Q : CSS 우선 순위 순서는 무엇입니까? !important a : 특이성 및 선언 순서가 우선 순위를 결정합니다. 인라인 & gt; id & gt; 클래스 & gt; 유형. 는이 순서에 영향을 미칩니다

Q : javaScript가 인라인 CSS를 재정의 할 수 있습니까?

!important a : 예, 요소의 속성을 ​​직접 조작하여 (예 : ). 그러나 이것은 인라인 스타일을 추가합니다 Q : WordPress/Bootstrap/React에서 CSS를 무시하는 방법?

A : WordPress : 하위 테마 또는 사용자 정의 CSS 플러그인을 사용하십시오. 부트 스트랩 : 부트 스트랩의 CSS 이후 링크 된 사용자 정의 CSS 파일을 만듭니다. 반응 : 인라인 스타일 또는 CSS 모듈을 사용하십시오. 항상 선택기 특이성을 고려하십시오. style document.getElementById("myElement").style.color = "blue"; 주석이 닫혔습니다. 포럼에서 CSS 질문을합니다

위 내용은 인라인 CSS 스타일을 무시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!