你如何在内部div中设计样式？

Question

我最近通过将span应用于部分文本，将文本标签添加到Wordpress菜单项，然后使用Chrome中的控制台对内容进行样式设置。

我的问题是选择正确的样式元素，以便我可以在我的网站站点范围设置中应用我的CSS，以使样式更改成为永久性的。

这就是控制台的样子：

菜单项类以.menu-item-4654结尾，所以我已经尝试了以下内容：

span.menu-item-4654 {
    styling: here;
}

和

menu-item-4654 span {
    styling: here;
}

我的猜测是，因为跨度在'a'属性中，我没有选择正确的元素来应用样式。

有人可以帮我纠正一下吗？

Answer 1

你很亲密

select column1 from your_table where column2='xxx'

.menu-item-4654 span{ styling: here; } 是您的列表项，您的menu-item-4654就在其中。

您设置的方式是您定位span

Answer 2

尝试此路径

<span class="menu-item-4654">

您的尝试并非针对正确的元素。您的第一次尝试是针对.menu-item-4654 span { styling: here; } 类span，树中没有此类元素。

.menu-item-4654

第二次尝试错过了一个点（你几乎就在那里）。缺少该点意味着定位像

这样的标记

span.menu-item-4654 {
    styling: here;
}

除非您注册，否则HTML5标准无效，请参阅Custom Elements。

<menu-item-4654><!-- inner HTML --></menu-item-4654>

Answer 3

您可能希望通过以下方式选择它：

.menu-item span {
    /* Things */
}

或者更具体（第二个孩子）

.menu .menu-item:nth-child(2) span {
    /* Stuff */
}

Answer 4

如果你想要第一个样式：

.menu-item-4654 > a > span {
    styling: here;
}

如果你想要造型最后一段：

.menu-item-4654 > a > span > span {
    styling: here;
}

Answer 5

如果要为突出显示的span元素设置样式，请使用以下CSS选择器。

.menu-item-4654 > a > span {
    some: property;
}

点将“menu-item-4654”标识为一个类。大于号仅选择父项的子项。您可以阅读定义here。 我建议查找CSS特异性以了解其工作原理。

Answer 6

感谢@mariobros为我提供了可行的解决方案。

以后参考解决我的问题的正确答案是：

menu-item-4654 > a > span > span {
    styling: here;
}

非常感谢！

View Final Effect