如何在更少的文件中编写a：hover :: before？

Question

我有一些CSS规则，只需要在LESS CSS文件中写入即可。

这是我的CSS-

div.files a > div,
div.files a:before {
    transition: background-color 350ms;
}

div.files a:hover > div {
    background-color: #000;
}

div.files a:hover::before {
    background-color: #017BC6;
}

这就是我在较少的CSS文件中尝试过的方法。但是无法使其正常工作。

更新：

> .files {
    margin-top: 18px;
    ....

    a {
        position: relative;
        text-decoration: none;
        margin-bottom: 10px;
        .....

        &:last-child {
            margin-bottom: 0;
        }

        &:before {
            background-color: #000;
            transition: background-color 350ms; 
            ....
        }

        &:hover {
            content: "";
            .block {
                background-color: #000;
            }

            &::before {
                background-color: #017BC6;
            }
        }


        .block {
            background-color: #017BC6;
            transition: background-color 350ms;
            ....

            .name {
                ....
            }

            .meta {
                ......

                &:after {
                    ....
                }

                .date {
                    ...
                }

                .format {
                    ...

                    &:before {
                        ...;
                    }                               
                }
            }    
        }
    }

    div {
        ......
    }
}

这是我的HTML-

<div class="files">
    <a href="#">
        <div class="block">
            <div class="name">.......</div>
            <div class="meta">
                <div class="date">.....</div>
                <div class="format">....</div>
            </div>
        </div>
    </a>
</div>

我在less（a:hover::before）中如何编写此类规则感到困惑。

希望有人可以帮助我。谢谢。

Answer 1

如聊天中所述，需要进行一些更正，如下：

1. 中的错字&::befor必须改正为&::before。
2. 父选择器（最上面的一个）必须从修改为> .files，div.files因为我们希望将样式应用于div元素class='files'及其后代。
3. 过渡最初没有工作，因为嵌套的问题和存在的content: "";的范围内:hover选择。

完整代码：

html {
    font-family: Arial, Helvetica, sans-serif;
}

div.files {
    position: relative;
    display: block;
    padding: 4px 4px 4px 0;
    text-decoration: none;
    counter-reset: file;
    a {
        position: relative;
        display: block;
        padding: 4px 4px 4px 62px;
        text-decoration: none;
        counter-increment: file;
        & .block, &:before {
        transition: background-color 350ms;
        }
        &:hover {
              > div {
              background-color: #000;
              }
              &::before {
            background-color: #017BC6;
              }
        }
    }
    a:before {
        content: counter(file);
        display: block;
        position: absolute;
        top: 2px;
        left: 2px;
        width: 68px;
        height: 68px;
        border: 5px solid #fff;
        background-color: #000;
        border-radius: 50%;
        text-align: center;
        line-height: 72px;
        color: #fff;
        font-size: 40px;
        font-weight: bold;
    }
    div {
        line-height: 1em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
        a > div {
        padding: 14px 14px 14px 28px;
        background-color: #017BC6;
    }
        .name {
        margin: 0 0 14px 0;
        font-size: 18px;
        color: #fff;
    }
    .meta {
        font-size: 14px;
        color: #bebfba;
        font-weight: bold;
                &:after {
            content: "";
            display: block;
            clear: both;
            }
    }
        .date {
        float: left;
    }
        .format {
        float: right;
                &:before {
            content: "Format | ";
            }
    }
}

演示版