CSS直接后代“>操作员不工作（而不是IE6）？ [英] CSS direct descendant ">" operator not working (and it's not IE6)?

问题描述

我想做一些非常简单的事情 - 选择标签的直接后代的标签。

我使用的CSS如下：

  table.data> tr {background-color：red; } 
  

我的HTML看起来像这样：

 < table class =data> 
< tr> 
 ... 
< / tr> 
< / table> 
  

但没有红色背景！如果我从CSS中删除>字符，它的工作原理！我已经尝试过在Firefox，IE 8，Chrome和Safari和所有的浏览器做的完全一样的东西。

希望有人可以帮助我经过这么多令人沮丧的小时！

解决方案

大部分的 ^{1我知道我做了一些非常愚蠢的事情，但我不知道是什么。} 浏览器会自动将 tbody 元素插入到表中，因此css应为：

  table.data> tbody> tr {background-color：red; } 
 
 
 
 
 
 
  1 我认为所有浏览器都这样做，但我没有容量或时间来检查这个假设。如果您担心某些浏览器可能不会这样做，您可以在css中提供两个选择器：
  table.data> tr，
 table.data> tbody> tr {background-color：red; } 
  
 
I am trying to do something very simple - select the  tags which are direct descendants of a  tag.

The CSS I am using is as follows:
table.data > tr { background-color: red; }
My HTML looks like this:
<table class="data">
    <tr>
        ...
    </tr>
</table>
But no red background is forthcoming!  If I remove the ">" character from the CSS, it works!  I have tried this in Firefox, IE 8, Chrome and Safari, and all the browsers do exactly the same thing.

Hopefully someone can help me after so many frustrating hours! I know I am doing something extremely stupid, but I can't figure out what it is.
解决方案
Most1 browsers automatically insert a tbody element into a table, so the css should be:
table.data > tbody > tr { background-color: red; }
to account for that.



1 I think that all browsers do this, but I don't have the capacity, or time, to check that assumption. If you're concerned that there might be some users with a browser that doesn't do this, you could offer both selectors in the css:
table.data > tr,
table.data > tbody > tr { background-color: red; }


                        
这篇关于CSS直接后代“&gt;操作员不工作（而不是IE6）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！