如何从检查的代码中找到 class 名称

Question

当我检查我的网页时，我得到了这个代码

<li id="SR_R1_tab" class="t-Tabs-item a-Tabs-before a-Tabs-selected is-active" aria-controls="SR_R1" role="tab" aria-selected="true">

它是一个 oracle apex 表格区域的子区域。我想在此 class（表格区域的子区域）中执行一些 css 修改和 javascript 操作。如何从这个检查过的代码中找到确切的 class？。我应该使用 class 't-Tabs-item' 还是 't-Tabs-item a-Tabs-before a-Tabs-selected is-active'？

Answer 1

您发布的 li 元素具有 class 属性：

class="t-Tabs-item a-Tabs-before a-Tabs-selected is-active"

这意味着它具有以下 class 个名称：

t-Tabs-item 
a-Tabs-before 
a-Tabs-selected 
is-active

如果您只想通过 class 名称定位此 li，并且考虑到没有其他 HTML 元素具有完全相同的 class t-Tabs-item a-Tabs-before a-Tabs-selected is-active , 将此 class 名称用于 selection:

.t-Tabs-item.a-Tabs-before.a-Tabs-selected.is-active { ... }

如果您想要 select 任何具有 class 名称 t-Tabs-item 的元素，请将其用作 selector，但考虑如果其他 HTML 你页面中的元素有这个 class，你的 selection 会 return 多个元素。

根据@str对你的问题的评论，如果你想定位这个特定的 li 元素，最好使用 id select 或者:

#SR_R1_tab  { ... }

Answer 2

这个元素有 4 个 css classes:

• t-Tabs-item
• a-Tabs-before
• a-Tabs-selected
• 活跃

在调试器中，您需要观察每个 class 对您的 UI 的作用，然后您可以决定覆盖哪个 class。

示例：如果您想更改每个元素的样式，您可能必须重写 t-Tabs-item:

.t-Tabs-item {
  background: red;
}

但是如果您只想更改所选项目的外观，那么您可能必须重写 a-Tabs-selected。在这种情况下，您还应该添加更通用的 .t-Tabs-item class 以避免副作用。

.t-Tabs-item.a-Tabs-selected {
  background: green;
}