Fatal编程技术网
  • css/
  • 其内容可以'；不要受CSS的影响

其内容可以'；不要受CSS的影响

css

其内容可以'；不要受CSS的影响,css,Css,这可能是一个相当愚蠢的问题，但我想知道。。。有没有办法使div的内容完全不受链接到HTML的CSS的影响 我有这样的想法： CSS ... p{ background-color: pink; } ... HTML <html> <head> ... <link href="css/styles.css" rel="stylesheet" type="text/css"/> </head> <bod

这可能是一个相当愚蠢的问题，但我想知道。。。有没有办法使div的内容完全不受链接到HTML的CSS的影响

我有这样的想法：

CSS

...
p{ background-color: pink; }
...
HTML

<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中的所有标签对样式免疫。像

<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中设置了样式，它们也不应该采用该样式，因为它们位于内部。immunedive而是使用默认样式。

试试这个

:not(.immunediv) p { background-color: pink; }

p {
    background-color: pink;
    color:red;
}
b {
    background-color: blue;   
}
.immunediv * {
    color:inherit;
    background:transparent;
}
和html

<p>Some text</p>
<b>Hahahaha</b>
<div class="immunediv">
    <p><b>Some</b> more text</p>
</div>

一些文本

哈哈哈
更多的文字
您在jsiddle中添加了一个额外的括号，通过调整中的解决方案，您可以重置元素及其所有子体的样式

.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：在某些情况下，它将不起作用。即使添加
！重要信息
如果一条规则具有更高的优先级，则另一条规则（在原始css中）可能具有更高的优先级（例如：另一条规则具有
！重要信息
）

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

  /* 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;
  }
你在第二条评论中的意思是“粉色”而不是“蓝色”？一般来说！重要的是打破了级联，但你真的需要知道你的immunediv可能会被弄糟的每一种方式。所以，它不是泛型的。您可能想将pink.pink{background:pink；}分类，并使用

Hello

而不是使用！重要的和“免疫div”（不存在，是一个巨大的黑客）是你想要的东西，如..？你可以尝试使用一个iFrame为该部分。我知道这不是你想要的答案。但这会给你同样的结果。iFrame不会从当前页面中获取样式。这不是我想要实现的。我正在尝试更多。。。普遍的。不仅仅是针对和。不过，感谢您的回答，并为额外的括号表示歉意：P