html - CSS 样式，样式子项

Question

我正在努力提高我对 CSS 的理解。

我有以下 HTML 表格:

<div class="app-pages validate-email-page" id="containerbg2">

        <div>
            <form action="<?php echo site_url("/validation-control");?>" method="post" id="dataForm">
                <table border='1' class="email-table">
                    <tr>
                        <th>First Name</th>
                        <th>Surname</th>
                        <th>Email</th>
                        <th>Sign Up Date</th>
                        <th>Expiration Date</th>
                        <th>Roll back user?</th>
                        <th>Repeat Validation?</th>
                    </tr>
                    <?php
                        $wcl_ci_api->get_page_view_verification_emails();
                    ?>

                </table>
                <input type="submit" value="Confirm">
            </form>
        </div>

    </div>
</div>

我有以下 CSS:

div.validate-email-page table {
    text-align: left;   
}

根据我对上述 CSS 的理解:

意思是“div”中具有“class validate-email-page”的任何“table”

将应用 CSS 样式，例如所有文本将左对齐。

接下来，如果我想对表格的某些部分(例如头部)应用特定的样式，我可以执行以下操作:

div.validate-email-page table th{
    text-align: left;   
}

div.validate-email-page table tr{
    text-align: center; 
}

这两个说:

在类为“validate-email-page”的 div 中，表格中所有行(标题)的中心文本(左侧文本)

这一切似乎工作正常。

我的问题是，我只想让复选框居中，这些复选框由 php 制作，类为“checkradio”并输入“checkbox”，但到目前为止我所有的尝试都失败了。

我尝试了很多不同的变体，但似乎无法做到正确，例如:

div.validate-email-page table input checkbox{
    text-align: Center;
}

我知道我并不太远，但我无法解决，似乎无法找到我的问题的明确答案

我最好按列名设置样式，这样我就可以根据列名更改每列的样式。

Answer 1

input checkbox会匹配 <input> <checkbox> </input>这不是您可以在 HTML 中拥有的东西。

如果您确实选择了一个复选框，那么 text-align: center不会工作，因为复选框内没有要居中的文本。

如果你想让一个复选框居中，那么你需要选择它所在的 block 元素然后应用text-align对此。

CSS doesn't have a parent selector ，因此您不能使用复选框的存在来定位其父级并选择它。

You can't align content based on the column要么。

将适当的表格单元格(<td> 元素)添加到类中并使用类选择器。