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