如何通过CSS修改Web应用中按钮的默认激活状态？

首先明确：CSS无法直接修改HTML元素的disabled属性，但可以通过模拟未激活的视觉状态+控制折叠内容的默认显示来达到需求效果，结合你能生效的CSS选择器，给出以下可行方案：

1. 默认隐藏折叠内容（核心需求） #

既然你之前用.htx-ranker-item p:nth-of-type(2) {display: none;}能成功隐藏文本，说明这个选择器对应折叠面板的展开内容，直接保留这个规则就能默认让列表项处于折叠状态：

.htx-ranker-item p:nth-of-type(2) {
  display: none;
}

2. 模拟按钮未激活的视觉样式 #

为了让按钮看起来是未激活状态，覆盖它的默认激活样式：

.htx-ranker-column button {
  /* 变灰降低透明度，模拟禁用视觉 */
  opacity: 0.6;
  /* 光标改成禁止样式，提示不可点击 */
  cursor: not-allowed;
  /* 如果按钮有激活时的背景/边框色，强制覆盖 */
  background-color: #e9ecef !important;
  border-color: #ced4da !important;
}

3. 可选：阻止按钮交互（完全禁用默认点击） #

如果需要彻底让按钮默认无法点击，添加pointer-events: none：

.htx-ranker-column button {
  pointer-events: none;
}

注意：如果后续需要通过点击激活按钮，可能需要配合JS移除这个样式，但如果你的场景只需要默认未激活，这个规则可以直接用。

为什么.htx-ranker-column button:enabled {}无效？ #

:enabled是CSS选择器，用来选中本来就处于启用状态的元素，而不是用来设置元素的启用/禁用状态，所以这个规则只会匹配启用的按钮，无法改变它的状态。

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