为什么我的 css 更改在检查器中起作用，但在定制器中不起作用？

Question

我正在尝试全局更改社交媒体图标的颜色，无论它们是通过 Visual Composer 使用主题的 "social media icons" 简码添加的。我使用 Chrome 的检查器找到了 class "site-social-icons-shortcode"，并使用 Wordpress 的定制器在下面添加了 css。它适用于 Inspector 和页面特定 CSS 定制器，但不适用于全局 CSS 定制器。我做错了什么？

http://evermanapparel.co.za/social-media-icon-colour-test/

.site-social-icons-shortcode {
    color: red !important;
}

Answer 1

你可以把这个 css: 颜色: #F1B831;在此 class .site-social-icons-shortcode

中的“http://evermanapparel.co.za/wp-content/themes/shopkeeper/css/styles.css”第 17813 行

Answer 2

您可以添加此 css 以总体定位所有图标

.site-social-icons-shortcode i {
    color: red;
}

或者，如果您需要为每个图标设置不同的颜色，请试试这个

.site-social-icons-shortcode .site-social-icons-facebook i {
    color: blue;
}
.site-social-icons-shortcode .site-social-icons-twitter i {
    color: red;
}

如果有多个 css 目标，您可以覆盖 css（不是一个好的解决方案）

.site-social-icons-shortcode .site-social-icons-twitter i { color:blue !important; }

为什么我的 css 更改在检查器中起作用，但在定制器中不起作用？

Why does my css change work in inspector but not in customiser?

html

css

wordpress

inspector