요소 전용 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;
}
}
따라서 모든 속성을 선언하지 않고도 스타일을 빠르게 제거하거나 다시 설정할 수있었습니다.
말이된다?
CSS3 키워드 initial는 spec에 정의 된대로 CSS3 속성을 초기 값으로 설정합니다 . 이 initial키워드는 IE 및 Opera Mini 제품군을 제외하고 광범위한 브라우저를 지원 합니다.
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;
}
/* basic modern patch */
#reset-this-root {
all: initial;
* {
all: unset;
}
}
@ user566245의 의견에서 언급했듯이 :
이것은 원칙적으로 정확하지만 개인 마일리지는 다를 수 있습니다. 예를 들어, 텍스트 영역과 같은 특정 요소에는 기본적으로 테두리가 있으며이 재설정을 적용하면 해당 텍스트 영역의 테두리가 덜 렌더링됩니다.
[POST EDIT FEB 4, '17] 사용자 표준 Joost
#reset-this-parent {
all: initial;
* {
all: unset;
}
}
W3의 예
예를 들어, 작성자가 요소에 initial : all을 지정하면 캐스케이드의 작성자, 사용자 또는 사용자 에이전트 레벨에 규칙이없는 것처럼 모든 상속을 차단하고 모든 특성을 재설정합니다.
이것은 외부 페이지의 스타일을 상속하지 않으려는 페이지에 포함 된 "위젯"의 루트 요소에 유용 할 수 있습니다. 그러나 해당 요소에 적용된 모든 "기본"스타일 (예 : 블록 요소의 UA 스타일 시트에서 표시 : 블록 등)도 사라집니다.
자바 스크립트?
아무도 CSS를 재설정하기 위해 CSS 이외의 것에 대해 생각하지 않았습니까? 예?
그 내용은 완전히 관련이 있습니다 : https : //.com/a/14791113/845310
getElementsByTagName ( "*")은 DOM에서 모든 요소를 반환합니다. 그런 다음 컬렉션의 각 요소에 스타일을 설정할 수 있습니다.
생성 9 feb. 132013-02-09 20:15:06 VisioN
var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
var element = allElements[i];
// element.style.border = ...
}
이 모든 말로; 우리가 하나의 웹 브라우저로 끝나지 않는 한 CSS 재설정이 실현 가능한 것으로 생각하지 않습니다. '기본'이 결국 브라우저에 의해 설정된 경우.
비교를 위해, 여기에 대한 파이어 폭스 40.0 값 목록입니다 <blockquote style="all: unset;font-style: oblique">경우 font-style: oblique트리거의 DOM 작업.
align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;
미래의 독자들을 위해. 이것이 의미하는 바이지만 현재 널리 지원되지는 않습니다 (아래 참조).
#someselector {
all: initial;
* {
all: unset;
}
}
- ( 소스 ) 에서 지원 : Chrome 37, Firefox 27, IE 11, Opera 24
- 지원되지 않음 : Safari
이 질문에 대해 몇 년 동안 고통의 원천이었으며 문제를 실제로 이해하고 해결하는 것이 왜 중요한지 극소수의 사람들이 아니기 때문에이 질문에 철저히 대답하겠습니다. CSS 사양에 대한 책임이 있다면 지난 10 년간 솔직히 말해서이 문제를 해결하지 못한 것에 대해 당황 스러웠습니다.
문제
HTML 문서에 마크 업을 삽입해야하며 특정 방식으로 표시되어야합니다. 또한이 문서를 소유하지 않으므로 기존 스타일 규칙을 변경할 수 없습니다. 스타일 시트 가 무엇인지, 또는 스타일 시트 가 무엇으로 바뀔 수 있는지 모릅니다.
사용 사례는 알 수없는 타사 웹 사이트에서 사용할 표시 가능한 구성 요소를 제공하는 경우입니다. 이에 대한 예는 다음과 같습니다.
- 광고 태그
- 컨텐츠를 삽입하는 브라우저 확장 프로그램 빌드
- 모든 유형의 위젯
가장 간단한 수정
모든 것을 iframe에 넣습니다. 여기에는 고유 한 제한 사항이 있습니다.
- 도메인 간 제한 : 콘텐츠가 원본 문서에 전혀 액세스 할 수 없습니다. 콘텐츠를 오버레이하거나 DOM을 수정할 수 없습니다.
- 표시 제한 : 내용이 사각형 안에 잠겨 있습니다.
컨텐츠 가 상자에 들어갈 수 있다면 컨텐츠 가 iframe을 작성하고 컨텐츠를 명시 적으로 설정하여 iframe과 문서가 동일한 도메인을 공유하므로 문제를 해결함으로써 문제 1을 해결할 수 있습니다.
CSS 솔루션
나는 이것에 대한 해결책을 찾기 위해 광범위하게 검색했지만 불행히도 아무도 없습니다. 가장 좋은 방법은 재정의 할 수있는 모든 속성을 명시 적으로 재정의 하고 기본값 을 생각 한대로 재정의하는 것입니다.
재정의하는 경우에도 보다 타겟이 지정된 CSS 규칙이 규칙을 재정의하지 않도록 할 수있는 방법이 없습니다 . 여기서 할 수있는 최선의 방법은 재정의 규칙을 가능한 한 구체적으로 대상으로 지정하고 부모 문서가 실수로 최선을 다하지 않기를 바랍니다. 콘텐츠의 부모 요소에 모호하거나 임의의 ID를 사용하고 모든 속성 값 정의에! important를 사용하십시오. .
이 문제에 대한 새로운 해결책이 있습니다.
"특정 요소에 대해 스타일 시트에서 이전에 설정 한 스타일을 제거하는 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;
}
}
할 것이다.
여기서 멋진 CSS 속성 하나와 다른 멋진 CSS 값을 사용했습니다.
revert실제로
revert이름에서 알 수 있듯이 해당 속성을 사용자 또는 사용자 에이전트 스타일로 되돌립니다.
all그리고 속성
revert과 함께 사용all하면 해당 요소에 적용된 모든 CSS 속성이 사용자 / 사용자 에이전트 스타일로 되돌아갑니다.
작성자, 사용자, 사용자 에이전트 스타일의 차이점을 보려면 여기를 클릭하십시오.
예를 들어 임베디드 위젯 / 컴포넌트를 포함하는 페이지의 스타일에서 임베디드 위젯 / 컴포넌트 를 분리하려면 다음과 같이 작성할 수 있습니다.
.isolated-component {
all: revert;
}
어느 것이 든 author styles(예 : 개발자 CSS)를 user styles(웹 사이트 사용자가 설정 한 스타일-시나리오가 적음) 또는 user-agent사용자 스타일이 설정되지 않은 경우 자체 스타일 로 되돌 립니다.
자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/revert를 참조하십시오.
그리고 오직 문제는 지원입니다 . Safari 9.1과 iOS Safari 9.3만이 revert글을 쓸 때 가치를 지원합니다 .
이 스타일을 사용하고 다른 답변으로 대체한다고 말하겠습니다.
다른 방법 :
1) Yahoo CSS 재설정 의 CSS 코드 (파일)를 포함 시키고이 DIV에 모든 것을 넣으십시오.
<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>
2) 또는 사용
- 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/
여기에 올바른 것으로 표시된 답변을 사용하지 않는 것이 좋습니다. 모든 것을 다루려고 시도하는 CSS의 거대한 덩어리입니다.
사례별로 요소에서 스타일을 제거하는 방법을 평가하는 것이 좋습니다.
SEO 목적을 위해 디자인에 실제 제목이없는 페이지에 H1을 포함시켜야한다고 가정 해 봅시다. 해당 페이지의 탐색 링크를 H1로 만들 수는 있지만 해당 탐색 링크가 페이지에서 거대한 H1으로 표시되는 것을 원하지는 않습니다.
해야 할 일은 해당 요소를 h1 태그에 싸서 검사하는 것입니다. h1 요소에 어떤 CSS 스타일이 적용되고 있는지 확인하십시오.
다음 스타일이 요소에 적용되는 것을 볼 수 있습니다.
//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;
font-family: 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>
빌드 시스템에서 sass를 사용하는 경우 모든 주요 브라우저에서 작동하는 한 가지 방법은 모든 스타일 가져 오기를 : not () 선택기로 감싸는 것입니다.
:not(.disable-all-styles) {
@import 'my-sass-file';
@import 'my-other-sass-file';
}
그런 다음 컨테이너에서 disable 클래스를 사용할 수 있으며 하위 콘텐츠에는 스타일이 없습니다.
<div class="disable-all-styles">
<p>Nothing in this div is affected by my sass styles.</p>
</div>
물론 모든 스타일에는 이제 : not () 선택기가 앞에 붙어 있으므로 약간 모호하지만 잘 작동합니다.
모바일 우선 사이트를 언급했습니다 ... 반응 형 디자인의 경우 작은 화면 스타일을 큰 화면 스타일로 재정의 할 수 있습니다. 그러나 필요하지 않을 수도 있습니다.
이 시도:
.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. */
}
}
이러한 미디어 쿼리는 겹치지 않으므로 규칙이 서로 재정의되지 않습니다. 따라서 각 스타일 세트를 개별적으로 유지 관리하기가 더 쉽습니다.
내 특정 시나리오에서 일반적인 스타일을 페이지의 특정 부분에 적용하는 것을 건너 뛰고 싶었습니다.
<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');
});
(이제 CSS를 다루기 위해 JS를 사용하는 것이 얼마나 악한 지 말해주십시오 :-))
파일에서 CSS를 제거하지 않고 요소에서만 실제로 스타일을 제거하는 방법을 찾으려고하는 사람들을 위해이 솔루션은 jquery와 함께 작동합니다.
$('.selector').removeAttr('style');
더 나은 솔루션
CSS 속성을 기본값 (UA 스타일)으로 재설정하려면 "복사 / 붙여 넣기"stylesheet를 다운로드 하십시오 .
https://github.com/monmomo04/resetCss.git
Thanks@Milche Patern!
I was really looking for reset/default style properties value. My first try was to copy the computed value from the browser Dev tool of the root(html) element. But as it computed, it would have looked/worked different on every system.
For those who encounter a browser crash when trying to use the asterisk * to reset the style of the children elements, and as I knew it didn't work for you, I have replaced the asterisk "*" with all the HTML tags name instead. The browser didn't crash; I am on Chrome Version 46.0.2490.71 m.
마지막으로 이러한 속성은 스타일을 최상위 루트 요소의 기본 스타일로 재설정하지만 각 HTML 요소의 초기 값으로 재설정하지는 않습니다. 그래서이 문제를 해결하기 위해 "사용자 에이전트"스타일의 웹킷 기반 브라우저를 가져 와서 "reset-this"클래스 아래에 구현했습니다.
CSS 속성을 기본값 (UA 스타일)으로 재설정하려면 "복사 / 붙여 넣기"stylesheet를 다운로드 하십시오 .
https://github.com/monmomo04/resetCss.git
사용자 에이전트 스타일 :
HTML 요소에 대한 브라우저의 기본 CSS
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
CSS 사양 (사양에주의하십시오) :
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>
매개 변수를 지정하지 않으면이 메소드는 선택된 요소에서 모든 클래스 이름을 제거합니다.
중요한 규칙을 찾고 계십니까? 모든 선언을 취소하지는 않지만 선언을 재정의하는 방법을 제공합니다.
"! 중요한 규칙이 스타일 선언에 사용되면이 선언은 선언 목록에있는 CSS에서 작성된 다른 선언보다 우선합니다.! important는 특정 성과는 아무 관련이 없습니다."
https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception
아니요, 이것은 CSS 구조를보다 잘 관리하는 것입니다.
귀하의 경우에는 다음과 같이 CSS를 주문하십시오.
.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}
@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}
그냥 실험 해봐
참고 URL : https://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only
도와주세요.
'development' 카테고리의 다른 글
| 다른 포크에서 병합되지 않은 업스트림 풀 요청을 포크에 적용하는 방법은 무엇입니까? (0) | 2020.02.17 |
|---|---|
| RSpec let ()을 언제 사용합니까? (0) | 2020.02.17 |
| 현재 실행중인 메소드의 이름 얻기 (0) | 2020.02.17 |
| 특정 값을 포함하는 배열이있는 문서 찾기 (0) | 2020.02.17 |
| jQuery : 아약스 호출 성공 후 데이터 반환 (0) | 2020.02.17 |