如何格式化CSS以使其正确加载？

Question

使用Chrome DevTools，我找到了我需要修改的CSS部分。我想改变颜色元素。

现有代码与＆＃34; Inspect＆＃34; Chrome DevTools的功能

#header-phone span:nth-child(1) {
color: #0188cc;
font-size: 30px;
font-weight: bold;
margin-top: -10px;
padding-left: 5px;
}

我的Magento主题有一个自定义CSS选项。如何将此元素添加到该选项以进行CSS更改？

我已尝试添加此功能但不起作用。

.header-phone .span {color:#6F9C40;}

Answer 1

您的CSS选择器与原始选择器不同。

#header-phone span:nth-child(1) vs .header-phone .span

#是ID标识符，.是类标识符。您已为#交换.并将.添加到span。

原始选择器的目标是<span>，它是内部存在的第一个子元素，ID为#header-phone的元素。

您的选择器定位一个元素，其中.span类存在于内部，而元素包含类.header-phone。

将其更改为实际原始选择器的内容，或者如果您要定位ID为#header-phone span的内部的所有<span>，请使用#header-phone。

注意：我不确定是否故意离开nth-child(1)。

Answer 2

试试这个：

#header-phone span:nth-child(1) {color:#6F9C40;}