大家好,问题是这样的,默认情况下:
<div class="main">
<div class="first"></div>
<div class="second"></div>
</div>
设置了 .main
的样式为:
.main { padding: 10px; }
而当子元素为iframe
的时候,想设置为:
padding: 0;
<div class="main">
<iframe></iframe>
</div>
想问一下有没有 css 直接设置的方法。
假如用 jQuery 的话,可以用:
$('.main').css('padding', '10px')
.find('> iframe').parent().css('padding', '0');
给iframe设置负外边距
.main iframe{margin:-10px;}
应该是一样效果吧
css不能直接做到,还是用js控制吧
据说CSS4能实现这样的功能,目前来说是实现不了的
$E > F
不过,咱们还可以这样实现:
.main {position: relative; padding: 10px;}
.main iframe {position: absolute; top: 0; right: 0; bottom: 0; left: 0}
注意,iframe上不设置 width
和height
了,因为像上面这样设置后,就都是 100%
的了
其实你从浏览器的角度来考虑这件事情,便不会有疑问了。
假如浏览器支持父级或者前面兄弟元素选择器的话,就不得不在渲染到当前元素时,倒回去找到特定的元素,重新渲染。
因为选择器是可以组合的,甚至还会造成很多其它元素也需要重新渲染(想象.someClass:parent div
),这样带来的reflow和repaint会造成难以估量的性能问题,甚至计算盒模型的栈保不齐都要溢出。所以自然不会有类似的选择器出现了。
http://www.css88.com/book/css/selectors/pseudo-classes/empty.htm