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;">
style
HTML 에서 속성을 제거하기 만하면 됩니다.
! 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;
}
참고 URL : https://stackoverflow.com/questions/14910608/override-element-style-using-css
'your programing' 카테고리의 다른 글
Git checkout / pull이 디렉토리를 제거하지 않습니까? (0) | 2020.10.16 |
---|---|
식이 예상되는 곳에 중괄호로 둘러싸인 블록을 배치하는이 C ++ 구문은 무엇입니까? (0) | 2020.10.16 |
Bash 스크립트 오류 [:! = : 단항 연산자가 필요합니다. (0) | 2020.10.16 |
Yarn으로 로컬 경로로 패키지를 설치하는 방법은 무엇입니까? (0) | 2020.10.16 |
get-put 원리에 대한 설명 (0) | 2020.10.16 |