Как отформатировать CSS так, чтобы он правильно загружался?

Question

Используя Chrome DevTools, я нашел раздел CSS, который мне нужно изменить. Я хочу изменить элемент цвета.

Существующий код найден с "Осмотреть" особенность 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) против .header-phone .span

# представляет собой идентификатор, идентификатор и . является идентификатором класса. Вы обменяли # на . и добавили . в span.

Исходный селектор нацеливает <span>, который является первым дочерним элементом, который существует внутри, и элементом с идентификатором #header-phone.

Ваш селектор нацелен на элемент с классом .span, который существует внутри, и элемент с классом .header-phone.

Измените его на фактический оригинальный селектор или используйте #header-phone span, если вы хотите нацелить ВСЕ <span> внутри и элемент с идентификатором #header-phone.

Примечание: Я не уверен, что увольнение nth-child(1) было преднамеренным или нет.

Answer 2

Попробуйте это:

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