这可能是一个相当愚蠢的问题,但我想知道......有没有办法让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 内,而是获得默认风格。
答案 0 :(得分:3)
:not(.immunediv) p { background-color: pink; }
答案 1 :(得分:0)
试试这个
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>
你在JSFiddle中添加了一个额外的括号
答案 2 :(得分:-1)
通过调整this answer的解决方案,您可以重置元素及其所有后代的样式。
.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
的另一个规则)
在这种情况下,您需要创建一个特定的覆盖
/* 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;
}