能否在CSS规则内部直接使用伪类简化样式编写？

你的提问内容： #

我目前使用以下CSS代码，运行完全正常：

.obj1a,
.obj2b,
.obj3c
{
    border: 1px solid #c6ffc7;
}

.obj1a:hover:not(:focus),
.obj2b:hover:not(:focus),
.obj3c:hover:not(:focus)
{
    border: 1px solid white;
    outline: 2px solid white;
}

.obj1a:focus,
.obj2b:focus,
.obj3c:focus
{
    border-width: 3px;
}

但我想知道是否有更简便的写法，比如像以下示例这样，在CSS规则内部直接使用伪类定义属性，请问这种写法是否可行？

.obj1a,
.obj2b,
.obj3c
{
    border: 1px solid #c6ffc7;
}

.obj1a,
.obj2b,
.obj3c
{
    border:hover:not(:focus): 1px solid white;
    outline:hover:not(:focus): 2px solid white;
    border-width:focus: 3px;
}

解答： #

1. 你设想的这种写法目前完全不可行，这不是标准CSS语法，没有任何浏览器支持这种在属性后直接嵌套伪类的写法。

2. 想要简化现有代码，推荐两种实用方法：

方法一：使用:is()选择器减少重复选择器 #

:is()是现代CSS支持的选择器，可以帮你把重复的选择器列表合并，代码会简洁很多：

:is(.obj1a, .obj2b, .obj3c) {
  border: 1px solid #c6ffc7;
}

:is(.obj1a, .obj2b, .obj3c):hover:not(:focus) {
  border: 1px solid white;
  outline: 2px solid white;
}

:is(.obj1a, .obj2b, .obj3c):focus {
  border-width: 3px;
}

注：:is()在所有现代浏览器（Chrome、Firefox、Safari 14.1+、Edge）都支持，兼容性没问题。

方法二：给元素添加通用类 #

如果可以修改HTML，给所有需要这套样式的元素加一个通用类（比如.shared-border-obj），然后直接用这个类写样式，代码最简洁：

.shared-border-obj {
  border: 1px solid #c6ffc7;
}

.shared-border-obj:hover:not(:focus) {
  border: 1px solid white;
  outline: 2px solid white;
}

.shared-border-obj:focus {
  border-width: 3px;
}

HTML里只需给.obj1a、.obj2b、.obj3c都加上shared-border-obj类即可。

内容的提问来源于stack exchange，提问作者Sten