4

我想知道这是否可能：我id在 css 中以这种形式定义。

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

#close:hover{
  cursor: pointer;
}

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

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

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

4

3 回答 3

6

你不能在 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 以包含在您的网页中。

于 2013-03-28T05:09:39.733 回答
2

好吧，在这种特殊情况下，您可以

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

因为指针仅在您悬停时才会显示；）

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

于 2013-03-28T05:10:59.080 回答
1

据我所知，没有人在 W3C CSS 工作组从事此工作 (*)

有：

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

(*) 在浏览器 imo 中几乎不需要它。我能想到的 CSS 中的 DRY 东西是类、:matches() （以前称为 :-vendor-any() ）和继承、初始值、“变量”和一个新的all属性（所有这些东西只与事实上他们避免了更长的任务，这与你的问题完全无关；））

于 2013-03-28T05:35:32.647 回答