0

有没有可能总结 CSS 选择器？这是我的样式表：

form.image_form > div > label > img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

form.image_form > div
{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    height: 156px;
    display: table-cell;
    vertical-align: middle;
}

form.image_form > div:hover
{
    background: green;
}

form.image_form > input[type="radio"]
{
    display: none;
}

form.image_form > input[type="radio"]:checked + div
{
    background: red;
}

像这样的东西是我想要归档的：

form.image-form
{
    > div
    {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        width: 100%;
        height: 156px;
        display: table-cell;
        vertical-align: middle;

        > label > img
        {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        :hover
        {
            background: green;
        }
    }

    > input[type="radio"]
    {
        display: none;

        :checked + div
        {
            background: red;
        }
    }
}

那么有没有可能组合/总结/交错这段代码？（如果看起来我没有做任何研究，我深表歉意，我确实做了，但在 w3c 文档中没有任何细节。也许我没有使用正确的搜索词。）

4

3 回答 3

2

使用“纯” CSS 这是不可能的。但是有一些像LESS或SASS这样的小助手可以帮助你实现这一点。

于 2013-11-12T10:42:10.907 回答
0

CSS3 规范中不允许嵌套选择器。很遗憾，因为它有助于组织 CSS 文件。

您可以使用预处理的 CSS 文件，例如 SASS。

于 2013-11-12T10:42:34.580 回答
0

您需要使用 CSS 预处理器（如SASS和LESS）来实现您正在寻找的内容。它不能用纯 CSS 来完成。

于 2013-11-12T10:42:57.317 回答