文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >其内容不受CSS影响的Div

问其内容不受CSS影响的Div
EN

Stack Overflow用户
提问于 2014-04-30 02:40:25
回答 3查看 740关注 0票数 6

这也许是个相当愚蠢的问题，但我想知道.有没有办法使div 的内容对链接到的CSS完全免疫？

我有这样的事情：

CSS

代码语言：javascript
复制
...
p{ background-color: pink; }
...

代码语言：javascript
复制
<html>
   <head>
      ...
      <link href="css/styles.css" rel="stylesheet" type="text/css"/>
   </head>
   <body>
      <p>Some text</p> <!--This should have pink background-->
      <div class="immunediv">
         <p>Some more text</p> <!--This shouldn't be blue-->
      </div>
   </body>
</html>

编辑：--这只是一个例子。我想要的是.immunediv中的所有标记都能对样式免疫。比如..。

代码语言：javascript
复制
<div class="immunediv">
   <h1>Hello</h1>
   <p>This is a <b>test</b></p>
   <a href="#">And this is a link</a>
</div>

即使b、h1、p和a都是在CSS中设计的，他们也不应该采用这种样式，因为它们位于中。免疫代码>E 222，而是获得默认的样式。

css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-04-30 04:05:21

代码语言：javascript
复制
:not(.immunediv) p { background-color: pink; }
票数 3
EN

Stack Overflow用户

发布于 2014-04-30 04:15:55

尝尝这个

代码语言：javascript
复制
p {
    background-color: pink;
    color:red;
}
b {
    background-color: blue;   
}
.immunediv * {
    color:inherit;
    background:transparent;
}

和html

代码语言：javascript
复制
<p>Some text</p>
<b>Hahahaha</b>
<div class="immunediv">
    <p><b>Some</b> more text</p>
</div>

您在JSFiddle中额外添加了一个括号

票数 0
EN

Stack Overflow用户

发布于 2014-04-30 04:26:55

通过调整来自this answer的解决方案，您可以重置元素及其所有子元素的样式。

代码语言：javascript
复制
.immune, .immune * {
    animation : none !important;
    animation-delay : 0 !important;
    animation-direction : normal !important;
    animation-duration : 0 !important;
    animation-fill-mode : none !important;
    animation-iteration-count : 1 !important;
    animation-name : none !important;
    animation-play-state : running !important;
    animation-timing-function : ease !important;
    backface-visibility : visible !important;
    background : 0 !important;
    background-attachment : scroll !important;
    background-clip : border-box !important;
    background-color : transparent !important;
    background-image : none !important;
    background-origin : padding-box !important;
    background-position : 0 0 !important;
    background-position-x : 0 !important;
    background-position-y : 0 !important;
    background-repeat : repeat !important;
    background-size : auto auto !important;
    border : 0 !important;
    border-style : none !important;
    border-width : medium !important;
    border-color : inherit !important;
    border-bottom : 0 !important;
    border-bottom-color : inherit !important;
    border-bottom-left-radius : 0 !important;
    border-bottom-right-radius : 0 !important;
    border-bottom-style : none !important;
    border-bottom-width : medium !important;
    border-collapse : separate !important;
    border-image : none !important;
    border-left : 0 !important;
    border-left-color : inherit !important;
    border-left-style : none !important;
    border-left-width : medium !important;
    border-radius : 0 !important;
    border-right : 0 !important;
    border-right-color : inherit !important;
    border-right-style : none !important;
    border-right-width : medium !important;
    border-spacing : 0 !important;
    border-top : 0 !important;
    border-top-color : inherit !important;
    border-top-left-radius : 0 !important;
    border-top-right-radius : 0 !important;
    border-top-style : none !important;
    border-top-width : medium !important;
    bottom : auto !important;
    box-shadow : none !important;
    box-sizing : content-box !important;
    caption-side : top !important;
    clear : none !important;
    clip : auto !important;
    color : inherit !important;
    columns : auto !important;
    column-count : auto !important;
    column-fill : balance !important;
    column-gap : normal !important;
    column-rule : medium none currentColor !important;
    column-rule-color : currentColor !important;
    column-rule-style : none !important;
    column-rule-width : none !important;
    column-span : 1 !important;
    column-width : auto !important;
    content : normal !important;
    counter-increment : none !important;
    counter-reset : none !important;
    cursor : auto !important;
    direction : ltr !important;
    display : inline !important;
    empty-cells : show !important;
    float : none !important;
    font : normal !important;
    font-family : inherit !important;
    font-size : medium !important;
    font-style : normal !important;
    font-variant : normal !important;
    font-weight : normal !important;
    height : auto !important;
    hyphens : none !important;
    left : auto !important;
    letter-spacing : normal !important;
    line-height : normal !important;
    list-style : none !important;
    list-style-image : none !important;
    list-style-position : outside !important;
    list-style-type : disc !important;
    margin : 0 !important;
    margin-bottom : 0 !important;
    margin-left : 0 !important;
    margin-right : 0 !important;
    margin-top : 0 !important;
    max-height : none !important;
    max-width : none !important;
    min-height : 0 !important;
    min-width : 0 !important;
    opacity : 1 !important;
    orphans : 0 !important;
    outline : 0 !important;
    outline-color : invert !important;
    outline-style : none !important;
    outline-width : medium !important;
    overflow : visible !important;
    overflow-x : visible !important;
    overflow-y : visible !important;
    padding : 0 !important;
    padding-bottom : 0 !important;
    padding-left : 0 !important;
    padding-right : 0 !important;
    padding-top : 0 !important;
    page-break-after : auto !important;
    page-break-before : auto !important;
    page-break-inside : auto !important;
    perspective : none !important;
    perspective-origin : 50% 50% !important;
    position : static !important;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019' !important;
    right : auto !important;
    tab-size : 8 !important;
    table-layout : auto !important;
    text-align : inherit !important;
    text-align-last : auto !important;
    text-decoration : none !important;
    text-decoration-color : inherit !important;
    text-decoration-line : none !important;
    text-decoration-style : solid !important;
    text-indent : 0 !important;
    text-shadow : none !important;
    text-transform : none !important;
    top : auto !important;
    transform : none !important;
    transform-style : flat !important;
    transition : none !important;
    transition-delay : 0s !important;
    transition-duration : 0s !important;
    transition-property : none !important;
    transition-timing-function : ease !important;
    unicode-bidi : normal !important;
    vertical-align : baseline !important;
    visibility : visible !important;
    white-space : normal !important;
    widows : 0 !important;
    width : auto !important;
    word-spacing : normal !important;
    z-index : auto !important;
}

注1:按钮和窗体控件将失去浏览器特有的样式。

注2:在某些情况下，它不起作用。即使将!important添加到规则中可以提供更高的优先级，但另一条规则(在原始css中)可能具有更高的优先级(例如:另一条带有!important的规则)。

在这种情况下，您需要创建一个特定的覆盖。

代码语言：javascript
复制
  /* original css */
  #header { 
     border: 1px solid black !important;
  }

  /* css reset (from above) */
  .immune, .immune * {
     border: none !important;
  }

  /* override */
  #header.immune, .immune #header {
     border: none !important;
  }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/23378751

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档