如何从检查过的代码中查找类名

Question

当我查看我的网页时，我得到了这段代码

LocalSettings.php

它是一个oracle apex表格区域的子区域。我想在这个类（表格区域的子区域）中执行一些CSS修改和javascript操作。如何从这个检查过的代码中找到确切的类？我是否应该使用't-Tabs-item'或't-Tabs-item a-Tabs-在选项卡选择为活动之前'？

Answer 1

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

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

这意味着它具有以下类名：

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

如果您只想按类名定位此li，并且考虑到没有其他HTML元素具有相同的完整类t-Tabs-item a-Tabs-before a-Tabs-selected is-active，请使用此类名进行选择：

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

如果要选择任何具有类名t-Tabs-item的元素，请将其用作选择器，但请注意，如果页面中的其他HTML元素具有此类，则您的选择将返回多个元素。

根据@ str对您问题的评论，如果您想定位此特定li元素，最好使用id选择器：

#SR_R1_tab  { ... }

Answer 2

这个元素有4个css类：

• 叔标签项目
• 一个-标签-前
• 一个的选项卡选择
• 是活性

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

示例：如果要更改每个元素的样式，则可能必须覆盖t-Tabs-item：

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

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

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