특정 요소 또는 선택기에 대해서만 CSS 스타일을 재설정/제거하는 방법
특정 요소에 대해 이전에 스타일시트에 설정된 스타일을 제거하는 CSS 규칙이 있습니까?
모바일 우선 RWD 사이트에서 작은 화면 보기의 특정 요소에 사용되는 스타일의 대부분을 바탕 화면 보기에서 동일한 요소에 대해 '재설정'하거나 제거해야 하는 경우가 좋은 사용 예가 될 수 있습니다.
다음과 같은 것을 달성할 수 있는 CSS 규칙:
.element {
all: none;
}
사용 예:
/* mobile first */
.element {
margin: 0 10;
transform: translate3d(0, 0, 0);
z-index: 50;
display: block;
etc..
etc..
}
@media only screen and (min-width: 980px) {
.element {
all: none;
}
}
따라서 모든 속성을 선언하지 않고도 스타일을 빠르게 제거하거나 재설정할 수 있습니다.
속성 CSS »all.initialCSS 속성을 사양에 정의된 초기 값으로 설정합니다.그all키워드는 IE 및 Opera Mini 제품군을 제외하고 광범위한 브라우저 지원을 제공합니다.
/* basic modern patch */
#reset-this-root {
all: unset;
}
또는
#reset-this-root {
all: initial;
}
IE의 지원 부족으로 인해 문제가 발생할 수 있으므로 다음은 일부 CSS 속성을 초기 값으로 재설정할 수 있는 몇 가지 방법입니다.
.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : '\201C' '\201D' '\2018' '\2019';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
/* basic modern patch */
all: initial;
all: unset;
}
이 모든 것이 언급되었듯이, 저는 CSS 재설정이 결국 브라우저에 의해 '기본값'이 설정된다면 웹 브라우저 하나로 끝나지 않는 한 실현 가능한 것이라고 생각하지 않습니다.
이 속성은 다음과 같이 작동합니다.
CSS:
#someselector {
all: initial;
}
#someselector * {
all: unset
}
SCSS:
#someselector {
all: initial;
* {
all: unset;
}
}
- 여전히 지원되는 모든 주요 브라우저에서 작동합니다.계속 유지해야 하는 경우 Internet Explorer에서 작동하지 않습니다.
사용하다all: revert또는all: unset.
MDN에서:
revert 키워드는 대부분의 경우와 동일하게 작동합니다.유일한 차이점은 브라우저 또는 사용자가 작성한 사용자 정의 스타일시트(브라우저 측에 설정됨)에 의해 설정된 값을 가진 속성에 대한 것입니다.
"특정 요소에 대해 이전에 스타일시트에 설정된 스타일을 제거하는 사용 가능한 CSS 규칙"이 필요합니다.
가 따서요 다음과같과 같은 ,remove-all-styles:
HTML:
<div class="remove-all-styles other-classe another-class">
<!-- content -->
<p class="text-red other-some-styles"> My text </p>
</div>
CSS 사용 시:
.remove-all-styles {
all: revert;
}
적용한모든스재설다니됩정타이에서 적용한 됩니다.other-class,another-class그리고 그것에 다른 모든 상속되고 적용된 스타일.div.
또는 당신의 경우:
/* mobile first */
.element {
margin: 0 10;
transform: translate3d(0, 0, 0);
z-index: 50;
display: block;
etc..
etc..
}
@media only screen and (min-width: 980px) {
.element {
all: revert;
}
}
할 거다.
내장된 위젯/구성요소를 포함하는 페이지 유형에서 분리하려면 다음과 같이 쓸 수 있습니다.
.isolated-component {
all: revert;
}
이것은 모든 작성자 스타일(즉, 개발자 CSS)을 사용자 스타일(우리 웹 사이트의 사용자가 설정하는 스타일 - 가능성이 낮은 시나리오)로 되돌리거나 사용자 스타일이 설정되지 않은 경우 사용자-에이전트 스타일 자체로 되돌립니다.
빠른 대답은 사용입니다."all:revert"
.element {
all:revert;
}
all:revert 요소의 모든 스타일 속성을 원래 브라우저 기본 UA 스타일 시트 속성 값 또는 상위 본문 요소의 스타일 값으로 다시 재설정합니다.그러나 다음과 같은 스타일 속성은 지우지 않습니다.initial완전히 스타일이 없는 상태로 되돌리는 것입니다.
에는,"revert"요소의 CSS 속성을 속성의 기본 스타일이 아닌 "본체" 요소 또는 브라우저의 기본 UA 스타일 값에서 가져온 상속된 값으로 다시 재설정합니다.상속되지 않는 속성의 경우 속성의 기본 스타일이 아닌 브라우저의 UA 기본 스타일 시트로 다시 재설정합니다."all"을 사용하면 모든 속성이 영향을 받을 수 있습니다.이것이 당신이 보고 싶은 것일 가능성이 높습니다.
사용 시 사용"all:revert"
"all:revert"는 보다 현대적인 HTML5 브라우저(2015년 이후)에서만 작동하는 최신 CSS 선언이며, Internet Explorer 1-11, Edge Trident 및 일부 모바일 브라우저와 같은 특정 현대 브라우저에서 매우 낮은 지원을 제공합니다.HTML5가 아닌 오래된 브라우저(2010년 이전)는 이 선언을 이해하지 못하므로, 구형 브라우저와 신형 브라우저 모두에서 이 선언을 무시할 것입니다. (아래에 Internet Explorer용 수정사항이 있는 혼합 CSS 솔루션을 참조하십시오.
사용 시 사용"initial"그리고."unset"
사용할 수 있습니다."initial"또는"unset"그러나 각 속성에 대해 속성을 수동으로 적용해야 하며, 더 나쁜 것은 각 브라우저의 기본 UA 스타일 시트에서 설정한 대로 요소의 기본 표시 값으로 속성을 반환하지 않고 요소의 속성 값을 지우고 완전히 비스타일화된 요소를 생성한다는 것입니다.예를 들어 블록 수준 요소의 "display:block"이 지워집니다.스타일 특성에는 여전히 어떤 종류의 기본값이 필요하므로 "display"가 있는 모든 블록 및 비블록 수준 요소는 "display:initial"을 사용할 때 "display:inline"으로 변경됩니다.선택한 요소에서 스타일과 브라우저의 기본 UA 요소 스타일이 완전히 지워지므로 이 작업을 수행하지 마십시오.
"unset"동일하게 작동하지만 상속된 텍스트 기반 CSS 속성의 경우 요소 위의 부모에 있는 속성(브라우저 기본 UA 스타일 또는 위의 HTML 부모에 있는 속성일 수 있음)을 상속하지만 상속되지 않은 속성의 경우 다음과 같이 작동합니다."initial".
는 사용을피것좋습다니이는하를 사용하는 것을 합니다.all:initial또는 어떤 형태로든initial 방법으로 수 CSS 왜요? CSS 속성, CSS 속성?initial적용한 스타일뿐만 아니라 브라우저의 기본 UA 스타일 시트가 적용된 모든 스타일을 지웁니다. all:revert이렇게 하지 않을 것입니다사용 측면에서initial그것은 그것의 사촌과 마찬가지로 인터넷 익스플로러에서 더 나은 지원을 가지고 있습니다.inherit IE8이 IE8+를 이해합니다.initial따라서 이 속성 값에는 다양한 문제가 있습니다.그것은 신뢰할 수 없습니다.
CSS가 이러한 방식으로 작동하는 이유는 브라우저가 모든 HTML 요소에 기본 스타일을 제공하는 기본 사용자-에이전트 스타일 시트를 적용할 때까지 모든 HTML 요소가 스타일 없이 제공되기 때문입니다.모든 HTML 요소는 실제로 스타일이 없으며 텍스트 영역 및 단추와 같은 "교체된" 요소를 제외하고는 각 브라우저의 기본 UA 시트가 적용될 때까지 동일하게 보입니다."initial" 및 "unset"은 브라우저에서 대부분의 정보를 삭제합니다. "revert"하므로, 어도사용의브자라의적해기세보스고존하용라, 니다우합수더따서적트를본보다 합니다."initial"그리고."unset"아래 링크에서 브라우저와 함께 제공되는 다양한 기본 스타일시트를 검토할 수 있습니다.
기본 브라우저 스타일시트 목록: https://meiert.com/en/blog/user-agent-style-sheets/
지금은 훨씬 더 나은 솔루션을 선택합니다.
여기서 혼동되는 두 가지 아이디어가 있습니다.
- 첫 번째 아이디어는 브라우저의 UA 스타일 시트 값 세트(설치 시 브라우저와 함께 제공되는 스타일 시트로 각 요소의 모양을 정의함)로 스타일을 "복귀"하는 것입니다.각 브라우저는 기본적으로 요소의 모양에 대해 고유한 스타일을 정의합니다.이 아이디어는 모든 페이지 유형을 각 브라우저 기본 요소 유형으로 되돌리는 것에 관한 것입니다.
- 두 번째 아이디어는 모든 기본 브라우저 스타일을 모든 브라우저가 공유하는 공통 모양과 느낌으로 "재설정"하는 것입니다.사람들은 모든 브라우저 요소를 공통적으로 합의된 스타일에 맞춰 정렬하기 위해 특별한 "재설정" 시트를 만듭니다.이것은 브라우저의 기본 UA 스타일과는 관계가 없으며 모든 브라우저를 공통 기본 스타일로 "정리"하고 정렬하는 것과 관련이 있습니다.이것은 가법 공정일 뿐입니다.
이것들은 여기 사람들이 혼동하는 두 가지 매우 다른 개념입니다.
각각의 브라우저는 약간 다르게 보이는 기본적인 기본 요소와 레이아웃 스타일을 가지고 있었기 때문에, 사람들은 사용자 지정 CSS를 적용하기 전에 모든 브라우저를 정렬하기 위해 "재설정" 또는 "재부팅" 스타일 시트를 고안했습니다.예를 들어 부트스트랩은 이를 수행합니다.그러나 그것은 브라우저의 기본 모양과 느낌으로 돌아가기를 원하는 사람들과는 아무런 관련이 없습니다.
문제는 이러한 사용자 정의 "재설정" 스타일 시트를 만드는 것이 아니라 스타일이 적용되기 전에 각 브라우저와 각 요소에 대한 기본 CSS가 무엇이었는지 파악하는 것입니다.대부분은 이미 적용된 모든 스타일을 "지우기" 전에는 기존의 깨끗한 캐스케이드를 재작성할 수 없다는 것을 알게 되었습니다.하지만 기본 브라우저 스타일로 돌아가는 방법은 무엇입니까?
일부에서는 요소를 브라우저와 함께 제공되는 UA 스타일 시트로 되돌리는 것을 의미합니다.많은 사람들이 브라우저의 기본 스타일과는 아무런 관련이 없는 "초기" 속성 값으로 다시 재설정하기를 원했지만 실제로는 속성이 기본값입니다.이는 "디스플레이"의 경우 블록 수준 요소를 "인라인"으로 다시 밀어넣고 테이블 레이아웃 및 기타 항목을 중단시킬 수 있으므로 위험합니다.
따라서 여기서 "초기"를 사용하여 모든 속성을 임의의 기본값 집합으로 다시 변경하는 모든 항목을 재설정하거나 사용자 지정 재설정 클래스를 사용하는 것에 동의하지 않습니다.
더 나은 해결책은 항상 모든 핵심 요소 스타일을 브라우저의 UA 스타일 시트 값으로 되돌리려고 시도하는 것입니다. 이는 모든 최종 사용자가 사용하는 것입니다.새 웹 사이트를 만드는 경우 이 작업을 수행할 필요가 없습니다.브라우저의 기본 스타일과 스타일로 시작합니다.타사 CSS 제품을 추가하거나 복잡한 CSS 캐스케이드를 사용한 후에야 브라우저 기본 스타일 시트 값으로 돌아가는 방법을 파악할 수 있습니다.
이러한 이유로, 저는 모든 요소를 하나의 공통 스타일로 재설정하기 위해 "재설정" 시트를 만드는 것에 찬성합니다. 첫 번째 단계는 모든 이전 브라우저와 새 브라우저가 공유하는 것입니다.그러면 브라우저 기본값으로 돌아가지 않고 훨씬 쉽게 되돌릴 수 있는 견고한 프레임워크가 만들어집니다.단순히 요소 스타일 값의 재설정된 공통 코어 세트를 기반으로 작성하는 것입니다.브라우저 UA 스타일을 변경하지 않는 자체 "재설정" 시트를 구축하면 수정이 매우 쉬운 사이트가 생성됩니다.
그 때 남은 유일한 문제는 그러한 재설정 시트가 없는 사이트가 있거나 복잡한 타사 CSS가 있고 브라우저 UA 스타일로 돌아가려고 시도해야 하는 경우입니다.어떻게 하는 거지?
Internet Explorer(인터넷 익스플로러)가 모든 속성을 수동으로 재설정하도록 강제했기 때문에 어떤 종류의 재설정으로도 되돌릴 수 없습니다.그러나 이러한 속성 값을 모두 "초기"로 푸시하면 브라우저 UA 스타일 시트 값이 완전히 파괴됩니다! 나쁜 아이디어!더 나은 방법은 와일드카드를 사용하여 모든 요소에서 IE가 아닌 브라우저에 대해 "all:revert"를 사용하고 페이지의 모든 상속 하위에 영향을 미치는 "html" 및 "body" 요소에서 발견된 소수의 상속된 루트 수준 속성에 대해서만 "inherit"를 사용하는 것입니다.(아래 참조).저는 "초기"를 사용하거나 모든 브라우저 또는 IE가 사용할 것으로 가정하는 가상 표준으로 돌아가는 이러한 대규모 속성 재설정에는 찬성하지 않습니다.우선 "initial"은 IE를 제대로 지원하지 않으며 값을 요소 기본값으로 재설정하지 않고 속성 기본값만 재설정합니다.그러나 모든 요소를 공통 스타일에 맞추기 위해 재설정 시트를 작성하는 경우에도 의미가 없습니다.그런 경우 스타일을 지우고 다시 시작하는 것은 무의미합니다.
대부분의 경우 루트에서 IE로 전송되는 텍스트 기반 값을 재설정하고 IE가 아닌 모든 브라우저에 대해 "all:revert"를 사용하여 상속되지 않은 값을 브라우저의 UA 스타일 시트로 완전히 강제로 되돌리기 때문에 진정한 재시작이 가능합니다.이것은 요소 스타일 위에 계층화된 상위 수준 클래스 및 스타일을 방해하지 않으며, 이는 항상 목표가 되어야 합니다.이것이 제가 지루하고 불필요하며 요소를 브라우저 UA 스타일로 되돌리지 않는 이러한 사용자 지정 재설정 클래스를 좋아하지 않는 이유입니다.예를 들어 부트스트랩의 "재부팅" 스타일 값을 덮어쓰고 브라우저 기본 스타일로 되돌리는 아래의 선택기에 주목하십시오.물론 IE에 대한 요소의 요소 스타일을 재설정하지는 않지만 IE 브라우저가 아닌 브라우저와 대부분의 상속 가능한 텍스트 스타일의 경우 대부분의 에이전트의 요소를 브라우저와 함께 제공되는 UA 스타일 시트로 되돌립니다.
:root, html {
display: block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
-webkit-text-size-adjust: inherit;
-webkit-tap-highlight-color: inherit;
all: revert;
}
html body {
display: block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: inherit;
padding: inherit;
color: inherit;
text-align: inherit;
background-color: inherit;
background: inherit;
all: revert;
}
/* This rule attempts to manually reset all elements back to the
UA browser style sheet using "revert" and the "wildcard" (*)
which resets all properties on all HTML elements.
This would overwrite most of Bootstraps "reboot" styles
on elements, for example.
Note: This selector should be ignored by IE. */
html body * {
all: revert;
}
또한 리셋 스타일 시트에서 되돌리기를 구현하는 무료 유니버설 CSS 프레임워크를 사용할 수 있습니다.
문제
HTML 문서에 마크업을 삽입해야 하며 특정한 방식으로 보여야 합니다.또한 이 문서를 소유하지 않으므로 기존 스타일 규칙을 변경할 수 없습니다.스타일 시트가 어떤 것인지, 어떤 것으로 바뀔 수 있는지 전혀 알 수 없습니다.
이에 대한 사용 사례는 알 수 없는 타사 웹 사이트에서 사용할 표시 가능한 구성 요소를 제공하는 경우입니다.예를 들어 다음과 같습니다.
- 광고 태그
- 내용을 삽입하는 브라우저 확장 작성
- 모든 유형의 위젯
가장 간단한 해결책
모든 것을 iframe에 넣으십시오.다음과 같은 제한 사항이 있습니다.
- 도메인 간 제한:내용은 원본 문서에 전혀 액세스할 수 없습니다.콘텐츠 오버레이, DOM 수정 등을 할 수 없습니다.
- 디스플레이 제한:내용이 직사각형 안에 잠겨 있습니다.
내용이 상자에 들어갈 수 있는 경우, 내용이 iframe을 작성하고 명시적으로 내용을 설정하도록 하여 문제 #1을 피할 수 있습니다. iframe과 문서가 동일한 도메인을 공유하기 때문입니다.
CSS 솔루션
가장 좋은 방법은 재정의할 수 있는 모든 속성을 명시적으로 재정의하고 기본값으로 재정의하는 것입니다.
당신이 재정의하더라도, 더 표적화된 CSS 규칙이 당신의 CSS 규칙을 재정의하지 않도록 보장할 방법은 없습니다.여기서 할 수 있는 최선의 방법은 재정의 규칙을 가능한 한 구체적으로 대상으로 지정하고 상위 문서가 실수로 최적화되지 않기를 바라는 것입니다. 내용의 상위 요소에 모호하거나 임의의 ID를 사용하고 모든 속성 값 정의에 !important를 사용하십시오.
다른 방법:
Yahoo CSS 재설정의 CSS 코드(파일)를 포함한 다음 이 DIV 안에 모든 것을 넣습니다.
<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>
또는 사용
- https://cssreset.com/scripts/vanilla-css-un-reset/
- https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
- https://cssreset.com/scripts/eric-meyer-reset-css/
- https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
- https://cssreset.com/scripts/normalize-css/
빌드 시스템에서 sass를 사용하는 경우 모든 주요 브라우저에서 작동하는 한 가지 방법은 모든 스타일 가져오기를 :not() 선택기로 포장하는 것입니다.
:not(.disable-all-styles) {
@import 'my-sass-file';
@import 'my-other-sass-file';
}
그런 다음 컨테이너에서 비활성화 클래스를 사용할 수 있으며 하위 내용에는 사용자의 스타일이 없습니다.
<div class="disable-all-styles">
<p>Nothing in this div is affected by my sass styles.</p>
</div>
물론 당신의 모든 스타일은 이제 :not() 선택기로 추가될 것이기 때문에, 그것은 조금 후련하지만 잘 작동합니다.
여기에 정답으로 표시된 답변은 사용하지 않는 것이 좋습니다.그것은 모든 것을 덮으려고 하는 CSS의 거대한 덩어리입니다.
요소에서 스타일을 제거하는 방법을 사례별로 평가하는 것이 좋습니다.
SEO 목적을 위해 설계에 실제 제목이 없는 페이지에 H1을 포함해야 한다고 가정해 보겠습니다.해당 페이지의 탐색 링크를 H1로 만들고 싶을 수도 있지만, 물론 해당 탐색 링크가 페이지에 거대한 H1로 표시되는 것은 원하지 않습니다.
당신이 해야 할 일은 그 요소를 h1 태그로 싸서 검사하는 것입니다.구체적으로 어떤 CSS 스타일이 h1 요소에 적용되고 있는지 확인합니다.
다음 스타일이 요소에 적용되었다고 가정합니다.
//bootstrap.min.css:1
h1 {
font-size: 65px;
font-family: 'rubikbold'!important;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
}
//bootstrap.min.css:1
h1, .h1 {
font-size: 36px;
}
//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
//bootstrap.min.css:1
h1 {
margin: .67em 0;
font-size: 2em;
}
//user agent stylesheet
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
이제 당신은 H1에 적용된 정확한 스타일을 지적하고 CSS 클래스에서 설정을 해제해야 합니다.이는 다음과 같습니다.
.no-style-h1 {
font-size: unset !important;
font-family: unset !important;
font-weight: unset !important;
font-style: unset !important;
text-transform: unset !important;
margin-top: unset !important;
margin-bottom: unset !important;
line-height: unset !important;
color: unset !important;
margin: unset !important;
display: unset !important;
-webkit-margin-before: unset !important;
-webkit-margin-after: unset !important;
-webkit-margin-start: unset !important;
-webkit-margin-end: unset !important;
}
이것은 훨씬 깨끗하며 실제로 무엇을 하고 있는지 모르는 임의의 코드 덩어리를 당신의 CSS에 버리는 것이 아닙니다.
이제 이 클래스를 h1에 추가할 수 있습니다.
<h1 class="no-style-h1">
Title
</h1>
특정 시나리오에서는 다음과 같이 더 잘 설명된 페이지의 특정 부분에 공통 스타일을 적용하는 것을 건너뜁니다.
<body class='common-styles'>
<div id='header'>Wants common styles</div>
<div id='container'>Does NOT want common styles</div>
<div id='footer'>Wants common styles</div>
</body>
(주로 규칙 우선 순위와 복잡한 스타일시트 계층 구조 때문에) 큰 성공을 거두지 못한 CSS 재설정을 엉망으로 만든 후, 유비쿼터스 jQuery를 복구에 도입하여 작업을 매우 빠르고 합리적으로 더럽혔습니다.
$(function() {
$('body').removeClass('common-styles');
$('#header,#footer').addClass('common-styles');
});
(이제 JS를 사용하여 CSS를 다루는 것이 얼마나 사악한지 말해보세요 :-)
만약 누군가가 여기에 와서 이를 활용할 수 있는 답을 찾고 있다면.iframe은 기있어요여여요입니다.
<iframe srcdoc="<html><body>your-html-here</body></html>" />
https://caniuse.com/iframe-srcdoc
모바일 퍼스트 사이트를 말씀하셨는데...반응성이 뛰어난 설계의 경우 작은 화면 스타일을 큰 화면 스타일로 대체할 수 있습니다.하지만 그럴 필요는 없을지도 모릅니다.
사용해 보십시오.
.thisClass {
/* Rules for all window sizes. */
}
@media all and (max-width: 480px) {
.thisClass {
/* Rules for only small browser windows. */
}
}
@media all and (min-width: 481px) and (max-width: 960px) {
.thisClass {
/* Rules for only medium browser windows. */
}
}
@media all and (min-width: 961px) {
.thisClass {
/* Rules for only large browser windows. */
}
}
이러한 미디어 쿼리는 서로 겹치지 않으므로 규칙이 서로 재정의되지 않습니다.이렇게 하면 각 스타일 집합을 개별적으로 유지 관리하기가 더 쉬워집니다.
파일에서 CSS를 제거하지 않고 요소에서만 스타일링을 제거하는 방법을 찾으려는 사람들에게 이 솔루션은 jquery와 함께 작동합니다.
$('.selector').removeAttr('style');
더 나은 솔루션
CSS 을 기본값하려면 "" 스타일시트를 "copy"는 CSS 파일(UA 파일)입니다.
https://github.com//resetCss.githttps ://github.com/monmomo04/resetCss.git
@Milche 패턴!
재설정/기본 스타일 속성 값을 찾고 있었습니다.저의 첫 번째 시도는 루트(html) 요소의 브라우저 Dev 도구에서 계산된 값을 복사하는 것이었습니다.하지만 계산해 보니 시스템마다 다르게 보였을 것입니다.
별표 *를 사용하여 자식 요소의 스타일을 재설정하려고 할 때 브라우저 충돌이 발생하는 사람들을 위해, 그리고 나는 그것이 당신에게 효과가 없다는 것을 알았기 때문에, 나는 별표 "*"를 대신 모든 HTML 태그 이름으로 교체했습니다.충돌하지 . 46. 저는 크롬 버전 46.0.2490.71m에 있습니다.
pest를 의 "을 사용하여 "이를 수정하기 위해 웹킷 기반 브라우저의 "사용자-에이전트" 스타일을 사용하여 "reset-this" 클래스에서 구현했습니다.
CSS 을 기본값하려면 "" 스타일시트를 "copy"는 CSS 파일(UA 파일)입니다.
https://github.com//resetCss.githttps ://github.com/monmomo04/resetCss.git
사용자-에이전트 스타일:
HTML 요소에 대한 브라우저의 기본 CSS
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
:CSS 지 (특정주의에정:):
https://css-tricks.com//https://css-tricks.com/specifics-on-css-specificity/
https://github.com/monmomo04/resetCss.git
클래스 내에서 CSS를 설정하면 jQuery removeClass() 메서드를 사용하여 쉽게 CSS를 제거할 수 있습니다.아래 코드는 .element 클래스를 제거합니다.
<div class="element">source</div>
<div class="destination">destination</div>
<script>
$(".element").removeClass();
</script>
매개 변수를 지정하지 않으면 이 메서드는 선택한 요소에서 모든 클래스 이름을 제거합니다.
저는 Material-Tailwind를 프로젝트에 사용하다가 요소의 기본 CSS를 제거하는 데 어려움을 겪었습니다. 그래서 jsx에 style=sysall: "css"}을 속성으로 추가하면 효과가 있었습니다.
했듯이, 다른답이언이듯, CSS 속성은.all 합니다.unset어떤 속성이 재생 중인지 모르는 상태에서 모든 CSS 속성을 재정의하는 것 같습니다.그러나 워드프레스 사이트에서 커스텀 CSS를 추가하는 동안 이것은 나에게 효과가 없었습니다.all속성이 Wordpress 사용자 지정 CSS 편집기에서 인식되지 않았으며 Microsoft Edge의 변경 사항을 반영하지 않았습니다.대신에, 저에게 효과가 있었던 것은 브루트 포스 오버라이드였습니다. 즉, 웹 페이지 요소에 사용되는 모든 속성을 식별하고 각 속성을 수동으로 재설정하는 것이었습니다.요소에서 사용 중인 CSS 속성을 식별하는 방법은 웹 브라우저로 요소를 검사하고 '스타일' 탭을 통과하는 것입니다.
혹시! 중요한 규칙을 찾고 있는 건 아닐까요?모든 선언을 취소하지는 않지만 재정의할 수 있는 방법을 제공합니다.
!important 규칙이 스타일 선언에 사용될 때, 이 선언은 선언 목록에 있는 모든 CSS의 다른 선언보다 우선합니다.하지만!중요성은 특수성과 아무런 관련이 없습니다.
https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception
언급URL : https://stackoverflow.com/questions/15901030/how-to-reset-remove-css-styles-for-a-specific-element-or-selector-only
'programing' 카테고리의 다른 글
| UIScrollView에서 스크롤 방향을 찾으십니까? (0) | 2023.07.06 |
|---|---|
| 요소가 특정 값 VBA인 경우 배열에서 요소 삭제 (0) | 2023.07.06 |
| SQL Server 2012에서 SQL Server 2014의 백업을 복원할 수 있습니까? (0) | 2023.07.06 |
| WordPress에서 wp_remote_get을 사용하여 XML 작업 (0) | 2023.07.06 |
| CSV, Excel, PDF 형식의 Angular로 데이터 내보내기제이에스 (0) | 2023.07.06 |