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

探しているものを実現するには、SASSやLESSなどの CSS プリプロセッサを使用する必要があります。純粋な CSS では実行できません。

于 2013-11-12T10:42:57.317 に答える
0

CSS3 仕様では、ネストされたセレクターは許可されていません。CSSファイルを整理するのに役立つので、残念です。

SASS のように、代わりに前処理された CSS ファイルを使用できます。

于 2013-11-12T10:42:34.580 に答える