Question

我有一张表格

<table class="myclass">
    <thead>
        <tr>
            <th colspan="7">something</th>
        <tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
        </tr>
    </thead>
    <tbody>
        etc...

我想将css规则仅应用于某些内容。那是tr的后果，而这又是thead的第一个后代，而后者又是myclass的后代，我使用这个css选择器

table.myclass thead > tr th{
    background-color:red;
}

但也适用于thead中的所有其他（1,2,3等）。我是否想念选择器？

有关高级选择器的任何好的教程吗？

示例jsfiddle

Answer 1

您需要指定您只想选择th作为tr的第一个孩子 thead的后代：table.myclass thead > tr:first-child th：

{{1}}

参考：http://css-tricks.com/almanac/selectors/f/first-child/

小提琴：http://jsfiddle.net/3P9nT/1/

Answer 2

根据您的要求，您只想为第一个tr > th应用CSS。因此，您可以使用:first-child css selecter：

table.myclass thead > tr:first-child th{
    background-color:red;
}

Try in fiddle

Your fiddle

Css选择器并选择特定元素

2 个答案: