重置/删除元素的CSS样式 [英] Reset/remove CSS styles for element only
问题描述
我相信这必须已经提到/问过，但一直在寻找一个没有运气的年龄，我的术语一定是错误！
我模糊地记住了一个我以前看到的推文，表明有一个css规则可以删除以前在样式表中为特定元素设置的任何样式。
一个很好的使用示例可能是在移动优先的RWD站点，其中用于小屏幕视图中的特定元素的大部分样式需要在桌面视图中为同一元素重置或删除。
一个css规则，可以实现类似的功能：
.element {
all：none;
}
Eaxmple用法：
/ * mobile first * /
.element {
margin：0 10;
transform：translate3d（0，0，0）;
z-index：50;
display：block;
等..
等..
}
@media只有屏幕和（min-width：980px）{
.element {
all：none;
}
}
所以我们可以快速删除或重新设置样式
CSS3关键字初始设置 CSS3属性设置为规范中定义的初始值。 初始关键字具有广泛的浏览器支持，除了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;
背面 - 可见性：可见;
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;
透视：none;
perspective-origin：50％50％;
position：static;
/ *可能需要改变不同地区的引号（例如fr）* /
引号：'\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;
}
正如@ user566245的注释中提到的：
这在原则上是正确的，但个别里程可能不同。对于
示例，某些元素，如textarea默认情况下有一个边框，
应用此重置将渲染这些textarea的边框减少。
有了这一切说：我不认为一个CSS重置是可行的，除非我们最终只有一个Web浏览器..
I'm sure this must have been mentioned/asked before but have been searching for an age with no luck, my terminology must be wrong!
I vaguely remember a tweet I saw a while ago that suggested there was a css rule available that would remove any styles previously set in the stylesheet for a particular element.
A good use example might be in a mobile-first RWD site where much of the styling used for a particular element in the small-screen views needs 'resetting' or removing for the same element in the desktop view.
A css rule that could achieve something like:
.element {
all: none;
}
Eaxmple usage:
/* 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;
}
}
So we could quickly remove or re-set styling without having to declare every property.
Make sense?
The CSS3 keyword initial sets the CSS3 property to the initial value as defined in the spec. The initial keyword has broad browser support except for the IE and Opera Mini families.
Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:
.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;
}
As mentioned in a comment by @user566245 :
this is correct in principle, but individual mileage may vary. For example certain elements like textarea by default have a border, applying this reset will render those textarea's border less.
With all this said; i don't think a css reset is something feasable unless we end up with only one web browser ..
这篇关于重置/删除元素的CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
