栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

重置/删除仅元素的CSS样式

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

重置/删除仅元素的CSS样式

CSS3关键字

initial
将CSS3属性设置为spec中定义的初始值。该
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;        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;    unipre-bidi : normal;    vertical-align : baseline;    visibility : visible;    white-space : normal;    widows : 0;    width : auto;    word-spacing : normal;    z-index : auto;        all: initial;    all: unset;}#reset-this-root {    all: initial;    * {        all: unset;    }}
  • Relevent github repo以及 2017年12月的 更多详细列表
  • 有关
  • 与MDN相关
  • 相关W3C规格

如@ user566245的评论中所述:

这在原则上是正确的,但个人里程可能会有所不同。例如,某些元素(例如textarea)默认情况下具有边框,应用此重置将使这些textarea的边框变少。

[17年2月4日编辑后]用户Joost赞扬其成为现代规范

#reset-this-parent {  all: initial;  * {    all: unset;  }}

W3中的示例

例如,如果作者在元素上指定all:initial,它将阻止所有继承并重置所有属性,就像级联的author,user或user-
agent级别中没有规则一样。

这对于不希望继承外部页面样式的页面中包含的“窗口小部件”的根元素很有用。但是请注意,应用于该元素的任何“默认”样式(例如UA样式表上的UA样式表中的display:块,例如)也会被吹走。


JAVAscript?

除了CSS以外,没有人考虑过要重置CSS吗?是?

getElementsByTagName(“ *”)将返回DOM中的所有元素。然后,您可以为集合中的每个元素设置样式:

VisioN在2013年2月9日20:15回答了

var allElements = document.getElementsByTagName("*");for (var i = 0, len = allElements.length; i < len; i++) {    var element = allElements[i];    // element.style.border = ...}

说了这么多;我不认为CSS重置是可行的,除非我们最终只使用一个Web浏览器..如果最后由浏览器设置了“默认”。

为了进行比较,这是Firefox 40.0值列表,用于触发DOM操作的

<blockquote >
where
font-style: oblique

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;


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/464984.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号