CSS本身内部伪类的使用？

Question

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

Answer 1

不幸的是，没有这样的用途。但是你可以用 SCSS 构建一个不同的结构：

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

<button class="obj1a">obj1a</button>
<button class="obj2b">obj1a</button>
<button class="obj3c">obj1a</button>

Answer 2

不允许使用该语法，但您可以使用属性选择器简化代码。此外，您可以使用一些自定义属性（变量）控制值

[class^="obj"] {
  border: var(--bw, 1px) solid var(--bc, #c6ffc7);
  outline: var(--ow, 0) solid #fff;
}

[class^="obj"]:hover:not(:focus) {
  --ow: 2px;
  --bc: #fff;
}

[class^="obj"]:focus {
  --bw: 3px;
}



body {
  display: grid;
  place-content: center;
  min-block-size: 100vh;
  background: linear-gradient(45deg, #546fb2, #90b436);
  font: 1rem/2 system-ui;
}

<a href="#" class="obj1a">obj 1a</a>
<a href="#" class="obj2b">obj 2b</a>
<a href="#" class="obj3c">obj 3c</a>