Question

我想知道这是否可行：我在这种形式的css中定义了id。

#close{
  font-size:11px;
  text-decoration: underline;
}

#close:hover{
  cursor: pointer;
}

但是我必须重复这个id的定义才能添加hover事件。有没有可能做这样的事情？

#close{
  font-size:11px;
  text-decoration: underline;
}:hover{cursor: pointer;}

这会节省一些额外的打字..

Answer 1

你不能在CSS中这样做，但是你可能会发现像SASS或LESS这样的CSS预处理器很有趣。它们允许您使用下一个选择器，请参阅SASS中的此示例：

.some-div {
    #close {
        font-size:11px;
        text-decoration: underline;

        &:hover {
            cursor: pointer;
        }
    }
}

这编译为：

.some-div #close {
    font-size:11px;
    text-decoration: underline;
}
.some-div #close:hover {
    cursor: pointer;
}

请注意，浏览器不支持这些内容，您可以编译程序来编译它们，这些程序会输出CSS以包含在您的网页中。

Answer 2

嗯，在这种特殊情况下你可以拥有

#close{
    font-size:11px;
    text-decoration: underline;
    cursor: pointer;
}

因为指针只会在你徘徊时显示;）

否则我不相信有任何语法技巧，但你可以使用像SASS这样的预编译器

Answer 3

据我所知，W3C CSS工作组中没有人正在研究这个问题（*）

有是：

预处理器，（见其他答案），
有复制粘贴，
也许是一个CSS ZenCoding / Emmett插件（虽然从来没有听说过它，但它不像Emmett那样严重需要用于HTML），
也许是一个宏，比如“复制我的CSS文件的最后一行，其末尾为{，如果以逗号结尾则为前一行”
并且有OOCSS，BEM等方法可以将嵌套选择器的需要降低到1或2级，即只有伪和不时的第二级（几乎没有id，只使用了类）

（*）在浏览器imo中几乎不需要它。我能想到的CSS中的干事是类，:matches() (previously known as :-vendor-any() )和继承，初始值，“变量”和新的all属性（所有这些事情只与它们避免更长任务的事实有关，它是与你的问题完全无关;））

简单的CSS技巧 - 这可能吗？

3 个答案: