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

这就是我在我的less 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

正如聊天中所讨论的那样，需要进行一些修正，它们如下：

&::befor中的拼写错误必须更正为&::before。
必须将父选择器（最顶层的选择器）从> .files修改为div.files，因为我们希望将样式应用于div元素class='files'和它的后代。
由于嵌套问题以及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 | ";
            }
    }
}

Demo

Answer 2

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

你有一个拼写错误＆＃39;在这里！

应该是

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

Answer 3

如果元素前后没有内容，则根本不可见

.x{
    &:before{content: '';}
}

我怎么写一个：hover :: before in less file？

3 个答案: