我这里有一个元素，我可以只更改 CSS 我不能触及 html 或 js。
这是我的片段:
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background: #15487F url('background2.jpg') top left repeat-x;
}
@media screen and (min-width: 533px) and (max-width:568px){
body {
background: #15487F url('background2.jpg') top left repeat-x;}
} <body onload="javascript:HMToggleExpandAll(true);">
<iframe name="hmnavigation" id="hmnavigation" src="hb3_3_content.htm" seamless="seamless" title="Navigation Pane" frameborder="0"></iframe>这是主页中的标签
<body onload="javascript:HMToggleExpandAll(true);">
还有CSS
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background: #15487F url('background.jpg') top left repeat-x;
}
我可以在改变宽度时改变主体背景
@media screen and (min-width: 533px) and (max-width:568px){
body {
background: #15487F url('background2.jpg') top left repeat-x;}
}
问题就在那里发生，因为现在，正在获取该背景。
我不想这样
这是我无法更改的 Iframe html
<iframe name="hmnavigation" id="hmnavigation" src="hb3_3_content.htm" seamless="seamless" title="Navigation Pane" frameborder="0"></iframe>
和我现在得到的 iframe 中的 body css
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background: #15487F url('background2.jpg') top left repeat-x;
}
我希望我让自己能被理解。
最佳答案
使用 CSS3，您可以使用以下语法排除 iframe id:
@media screen and (min-width: 533px) and (max-width:568px) {
body :not(#hmnavigation) {
background: #15487F url('background2.jpg') top left repeat-x;
}
}
否则，您可以在 body 元素中已声明的背景属性上强制使用 iframe id:
#hmnavigation {
background: url('background.jpg');
}
编辑:见下面的评论
关于html - 当变得响应时，body 标签中的 css 将进入 Iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48665988/