Question

我正在尝试使用特殊样式设置外表的第一列（ tbStudentPreference ）...

但问题是它不仅适用于外部表列，还适用于外部表中的表。

我想将我的样式仅应用于外部容器表。请帮忙。

<style>

        #tbStudentPreference td:first-child {
            font-weight: bold;            
            vertical-align: top;
            width: 100px;
        }

        #tbStudentPreference {
            vertical-align: top;
            padding: 3px;
        }
    </style>


<table id='tbStudentPreference'>
                <tr>
                    <td>xxxxx
                    </td>
                    <td>.....
                    </td>
                </tr>
                <tr>
                    <td>xxxxx
                    </td>
                    <td>.....
                    </td>
                </tr>
                <tr>
                    <td colspan='2'>
                        <table>
                            <tr>
                                <td>Inside Table
                                </td>
                                <td>.....
                                </td>
                            </tr>
                            <tr>
                                <td>Inside Table
                                </td>
                                <td>.....
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

Answer 1

我正在尝试设置外部表的第一列..

你需要否定内部表格。

此外，浏览器会自动为您添加tbody，因此直接在tr上使用子组合器是不够的。您需要在tbody上使用子组合器覆盖它。然后，使用colspan属性的存在来否定内部表。

因此，您选择td first-child，其中not属于colspan属性，tr的直接后代本身就是tbody table的直接后裔，它本身就是#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {...的直接后裔。像这样：

#tbStudentPreference { border: 1px solid gray; border-collapse: collapse; }
#tbStudentPreference td { border: 1px solid gray; }

#tbStudentPreference > tr > td:not([colspan]):first-child {
    font-weight: bold; color: red;
}
#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {
    font-weight: bold; color: red;
}

否定伪类：https://developer.mozilla.org/en-US/docs/Web/CSS/:not

<强> 段：

＆＃13;

<table id='tbStudentPreference'>
    <tr><td>xxxxx</td><td>.....</td></tr>
    <tr><td>xxxxx</td><td>.....</td></tr>
    <tr><td colspan='2'>
        <table>
            <tr><td>Inside Table</td><td>.....</td></tr>
            <tr><td>Inside Table</td><td>.....</td></tr>
        </table>
    </td></tr>
</table>

＆＃13;

{{1}}

＆＃13;

表嵌套表的Css样式

1 个答案: