html - 页面选项卡 WordPress 的自定义 CSS

Question

我有一个 WordPress 网站，其用户个人资料中有一个标签页。有两个选项卡:

User Info
Categories 

我需要向“类别”选项卡添加自定义样式，但我能在 HTML 标记中找到的唯一区别是:

data-anchor="categories" 

我以为我可以在我的 CSS 中使用它，但我为使它正常工作所做的每一次尝试都失败了。这是我做过的两次尝试，但都失败了。

.sow-tabs-tab [data-anchor="categories"]
.sow-tabs-tab div[data-anchor="categories"] 

这是这个标签的 HTML:

<div class="sow-tabs-tab sow-tabs-tab-selected" role="tab" data-anchor="categories"> 

这是“用户信息”选项卡的 HTML:

<div class="sow-tabs-tab" role="tab" data-anchor="user-info">

有什么方法可以在我的 CSS 中使用 data-anchor 值来实现这个目标吗？

Answer 1

去掉类名和属性之间的空格。在查看 HTML 示例时，另一行 CSS 对我来说意义不大。

.sow-tabs-tab[data-anchor="categories"] {
margin-top: 5rem;
}

<div class="sow-tabs-tab sow-tabs-tab-selected" role="tab" data-anchor="categories">Category</div>