CSS 父元素如何通过判断子元素来设置样式

Question

大家好，问题是这样的，默认情况下：

<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');

Answer 1

其实你从浏览器的角度来考虑这件事情，便不会有疑问了。

假如浏览器支持父级或者前面兄弟元素选择器的话，就不得不在渲染到当前元素时，倒回去找到特定的元素，重新渲染。

因为选择器是可以组合的，甚至还会造成很多其它元素也需要重新渲染（想象.someClass:parent div），这样带来的reflow和repaint会造成难以估量的性能问题，甚至计算盒模型的栈保不齐都要溢出。所以自然不会有类似的选择器出现了。

Answer 2

给iframe设置负外边距

.main iframe{margin:-10px;}

应该是一样效果吧

Answer 3

css不能直接做到，还是用js控制吧

Answer 4

据说CSS4能实现这样的功能，目前来说是实现不了的

$E > F

不过，咱们还可以这样实现：

.main {position: relative; padding: 10px;}
.main iframe {position: absolute; top: 0; right: 0; bottom: 0; left: 0}

注意，iframe上不设置 width和height了，因为像上面这样设置后，就都是 100%的了

Answer 5

http://www.css88.com/book/css/selectors/pseudo-classes/empty.htm