inline! important를 재정의 할 수 있습니까?

inline! important를 재정의 할 수 있습니까?

---

당신이 가지고 있다면

<div style="display: none !important;"></div>

스타일 시트에서이를 재정 의하여 표시하는 방법이 있습니까?

다음과 유사한 것을 사용하는 것이 바람직합니다.

div { display: block !important; }

---

일반적으로 인라인 스타일 을 재정의 할 수 있다고 말하면서 시작하겠습니다 .

.override {color:red !important;}​

<p style="color:blue;">I will be blue</p>
<p style="color:blue;" class="override">But I will be red</p>

Fiddled

이 동작은 W3 사양에 설명 되어 있습니다 . 여기서 !important선언은 특이성을 변경하지 않고 "일반"선언 보다 우선 합니다.

즉, 충돌하는 규칙 모두에 !important플래그 가있을 때 특이성은 인라인 규칙이 적용됨을 나타냅니다. 즉, OP 시나리오의 경우 인라인 을 재정의 할 방법이 없습니다 !important.

---

인라인 CSS가있는 경우 재정의 할 수 없습니다 !important. 외부 CSS 파일의 스타일보다 우선 순위가 높습니다.

그러나 나중에 일부 작업을 변경하려는 경우 약간의 JavaScript를 사용할 수 있습니다.

---

인라인 CSS !important는 우선 순위가 더 높기 때문에 재정의 할 수 없지만 JavaScript를 사용하면 원하는 것을 얻을 수 있습니다.

---

인라인 스타일은 !important. 첫 번째 선호는 인라인 스타일입니다.

예 : 우리는 수업이 있습니다

.styleT{float:left;padding-left:4px;width:90px;}

그리고 jsp에서

<div class="styleT" id="inputT" style="padding-left:0px;">

여기에는 padding-left : 4px;를 제외하고 는 padding-left:4px;.It 클래스를 사용 하지 않습니다 styleT. 있을 것입니다 padding-left:0px;.

---

다음은 간단한 jQuery 솔루션입니다.

$(document).ready(function() { 
$('div').css('display','block');
})

---

두 CSS 속성이 동일한 노드에 적용될 때 우선 순위 규칙 :

• !important낫지 않습니다 !important. 똑같이! 중요하다면 ...

• style속성이 파일의 CSS보다 우수합니다. 둘 다 CSS 파일에있는 경우 ...

• CSS 선택기의 ID가 ID를 능가하지 않습니다. 그리고 더 많은 ID가 더 적습니다. (그리고 선택기에서 두 개의 ID에 대한 이유가 없다고 생각했습니다.) 동일한 ID 개수 인 경우 ...

• [name]선택기에서 와 같은 클래스 또는 속성은이 를 계산합니다. 더 적은 비트. 모두 동일하다면 ...

• 태그 같은 이름 span또는 input더 비트 이하.

따라서 인라인 !important이 가장 높은 우선 순위임을 알 수 있습니다 .

---

이 예를 볼 수 있습니다! CSS 선택기에 대한 몇 가지 규칙이 있습니다. 가장 강력한 선택자는 인라인입니다 (중요한 경우 /없는 경우). 다음 것 : id, class 등. 따라서 태그가 이미! important를 사용하여 인라인 CSS에 의해 양식화 된 경우 방법이 있습니다. Javascript를 사용하여 변경하십시오.

var pid = document.getElementById('pid');
var button = document.getElementById('button');
button.addEventListener('click', function(){
  pid.style.color = '';
});

p{color:violet !important;}

*{color:blue !important;}

html *{color:brown !important;}

html p{color:lighblue !important;}

.pclass{color:yellow !important;}

#pid{color:green !important;}

<p class="pclass" id="pid" style="color:red !important;">
Hello, stylize for me !
</p>

<button id='button'>Change color by JS</button>

보시다시피 인라인 CSS에 의한 스타일이 제거되었으며 ID는 이제 가장 강력한 선택자입니다!

참고URL : https://stackoverflow.com/questions/11150684/can-i-override-inline-important