使用 CSS 更改按钮的默认激活状态

Question

这是为了使用网络应用程序，我可以在其中提供样式表选项来更改 UI。它适用于隐藏一些我不想要的文本之类的事情，但我现在遇到一个问题，有些按钮默认处于活动状态，而我希望默认设置处于关闭状态。具体来说，这些按钮控制项目列表中的折叠/展开视图。

这可能不是 CSS 可以做的事情，这是一个非常好的答案。请注意，除了在配置文件中提供样式元素之外，我无法更改基础文档。

这个例子 - 第一行允许我更改启用按钮的样式，但我不想这样做，我想将所有按钮的默认设置设置为启用。 第二行是我发现的一段代码，可以让我隐藏项目的特定部分，并证明这种 CSS 是有效的。

   <Style>
    .htx-ranker-column button:enabled {} # this doesnt work!
    .htx-ranker-item p:nth-of-type(2) { 
        display: none;
    }
  </Style>

Answer 1

CSS 无法在功能上单独改变按钮等元素的状态。

:enabled

或

:disabled

选择器适用于已经处于这些状态的元素。

您可以通过以下方式将按钮的外观调整为look启用或禁用：

/* disabled */
.htx-ranker-column button {
  pointer-events: none;
  opacity: 0.5;
}

/* enabled */
.htx-ranker-column button:enabled {
  pointer-events: auto;
  opacity: 1;
}

否则对于改变状态的实际功能，你需要像javascript这样的东西