CSS를 사용하여 element.style 재정의

페이지 빌더의 HTML 페이지가 있으며 style속성을 요소에 직접 삽입 합니다. 나는 그것이 element.style.

CSS를 사용하여 재정의하고 싶습니다. 요소를 일치시킬 수 있지만 무시하지는 않습니다.

CSS를 사용하여 스타일을 재정의하려면 어떻게해야합니까?

종종 눈살을 찌푸 리지만 기술적으로 다음을 사용할 수 있습니다.

display: inline !important;

일반적으로 좋은 방법은 아니지만 경우에 따라 필요할 수 있습니다. 해야 할 일은 <li>처음에 요소에 스타일을 적용하지 않도록 코드를 편집하는 것입니다 .

이 CSS는 JavaScript도 덮어 씁니다.

#demofour li[style] {
    display: inline !important;
} 

또는 처음에만

#demofour li[style]:first-child {
    display: inline !important;
}

element.style 마크 업에서옵니다.

<li style="display: none;">

styleHTML 에서 속성을 제거하기 만하면 됩니다.

! important를 사용하면 Change와 같은 CSS를 통해 element.style이 재정의됩니다.

color: #7D7D7D;

...에

color: #7D7D7D !important;

그렇게해야합니다.

물론 여기서! important 트릭이 결정적이지만 더 구체적으로 타겟팅하면 재정의가 실제로 적용되는 것 (가중 기준이! important를 지배 할 수 있음)뿐만 아니라 의도하지 않은 요소를 재정의하는 것을 방지하는 데 도움이 될 수 있습니다.

브라우저의 개발자 도구를 사용하여 문제가되는 스타일 속성의 정확한 값을 식별하십시오. 예 :

"font-family: arial, helvetica, sans-serif;"

또는

"display: block;"

그런 다음 재정의 할 선택기 분기를 결정합니다. 필요에 맞게 선택을 넓히거나 좁힐 수 있습니다. 예 :

p span

또는

section.article-into.clearfix p span

마지막으로 custom.css에서 [attribute ^ = value] 선택기와! important 선언을 사용합니다.

p span[style^="font-family: arial"] {
  font-family: "Times New Roman", Times, serif !important;
}

전체 스타일 속성 값을 인용 할 필요는 없으며 문자열과 모호하지 않게 일치시키기에 충분합니다.

내 지식에 따라 인라인 스타일이 먼저 나오므로 CSS 클래스가 작동하지 않아야합니다.

Jquery를 다음과 같이 사용하십시오.

$(document).ready(function(){

   $("#demoFour li").css("display","inline");
  });

You can also try 

#demoFour li { display:inline !important;}

JavaScript를 사용하십시오.

예를 들면 :

var elements = document.getElementById("demoFour").getElementsByTagName("li");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "inline";
}

요소 스타일의 잘못된 속성을 참조하여 CSS의 스타일을 재정의 할 수 있습니다. 제 경우에는이 두 코드가 15px로 설정되어 배경 이미지가 검게 변합니다. 그래서 0px로 재정의하고! important를 배치하여 우선 순위가됩니다.

.content {
    border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
}