页面选项卡WordPress的自定义CSS答案

【问题标题】：Custom CSS for page tab WordPress页面选项卡WordPress的自定义CSS
【发布时间】：2019-08-27 21:11:35
【问题描述】：

我有一个 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 值来实现这个目标？

【问题讨论】：

【解决方案1】：

去掉类名和属性之间的空格。另一行 CSS 对我查看 HTML 示例没有多大意义。

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

&lt;div class="sow-tabs-tab sow-tabs-tab-selected" role="tab" data-anchor="categories"&gt;Category&lt;/div&gt;

【讨论】：