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”中的任何“表”都带有“类验证-电子邮件-页”。

将CSS样式应用到它(如所有文本将左对齐)。

接下来，如果我想将特定的造型应用于表的部分(如头)，我可以做以下工作：

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

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

这两个人说：

在div中为表中的所有行(标题)居中文本(左文本)，其中包含类“验证-电子邮件-页”。

这一切似乎都很顺利。

我的问题是，我只想集中复选框，这些复选框是由php创建的，类为'checkradio‘并键入’复选框‘，但到目前为止，我的所有尝试都失败了。

我试过许多不同的变体，但似乎不能正确。

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;
}

这将应用于带有校验无线电类的输入，在表中，在带有验证-电子邮件页面类的div中。;)

编辑：

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

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