2012-03-25 107 views
2

我想为我的FlexTable在GWT中定义一组CSS规则。我已经为奇数和偶数的所有组合定义了4条不同的规则。gwt风格的第n个孩子与第一个孩子相撞

.myTable tbody tr:nth-child\(odd\) td:nth-child\(odd\) { 
    background: #EEEEDD; 
} 

它工作得很好,但现在我想为第一行表定义单独的样式。我试图做这样的事情:

.myTable tbody tr:first-child { 
    background: #123456; 
} 

但它不符合4先前的规则。它被忽略。你有什么建议如何为第一行表格定义单独的样式?

回答

2

由于您在第一条规则中将背景应用于td元素,因此您需要将其应用于第二条规则中的td元素。

假设你想为整个第一行中的所有细胞相同的不同的背景:

.myTable tbody tr:first-child td:nth-child\(even\), 
.myTable tbody tr:first-child td:nth-child\(odd\) { 
    background: #123456; 
} 

为了较短,这里有一个窍门,使用:nth-child(n)匹配所有td元素:

.myTable tbody tr:first-child td:nth-child\(n\) { 
    background: #123456; 
} 
+0

谢谢@BoltClock。我已经试过你的代码,我必须承认你是对的:)它应该是: .myTable tr:first-child td:nth-​​child \(even \){ background:#123456; } .myTable tbody tr:first-child td:n-child \(odd \){ background:#123456; } – Grzes 2012-03-25 14:07:53

+0

@Grzes:啊,是的,伪类重写它。我编辑了我的答案,避免了代码重复。 – BoltClock 2012-03-25 14:08:53