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”类的任何“表”

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

接下来，如果要对表的各个部分（例如，head）应用特定的样式，可以执行以下操作：

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

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

这两个说：

div中表中所有类别为“ validate-email-page”的行（标题）的中心文本（左文本）

这一切似乎都很好。

我的问题是，我只想将复选框居中，该复选框是由php制作的，具有类“ checkradio”并键入“ checkbox”，但是到目前为止，我的所有尝试均以失败告终。

我尝试了许多不同的变体，但似乎无法正确完成，例如：

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

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

最好是我想按列名设置样式，以便可以根据列名更改每个列的样式。

Answer 1

input checkbox将与<input> <checkbox> </input>匹配，这在HTML中是无法实现的。

如果您确实选中了一个复选框，则text-align: center将不起作用，因为复选框内没有文本可居中。

如果要使复选框居中，则需要选择其内部的块元素，然后对其应用text-align 。

CSS没有父选择器 ，因此您不能使用复选框的存在来定位它的父选择器。

您也不能根据该列对齐内容 。

将适当的表单元格（ <td>元素）添加到类中，然后使用类选择器。

Answer 2

是的，你很近。 :)

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

这将应用于表中带有validate-email-page类的div中具有checkradio类的输入。 ;）

编辑：

或者您可以尝试属性选择器：

div.validate-email-page table input[type="checkbox"] {
    text-align: center;
}