Question

所以，我对CSS很陌生。我正在为我使用WordPress的公司开发一个网站。我知道，WordPress＆＃34; NOOB ALERT。＆＃34; 无论如何，我正在使用大规模的动态主题，并希望得到一些帮助。我创建了三个CSS类，我想将它们应用于具有唯一ID的三个不同的div。

插件柱-1
插件柱-2
插件柱 - 3

我想将以下CSS类添加到这些div中。

页脚-插件-1
页脚-插件-2
页脚-插件-3

分别为其对应的数字。但是，当我尝试使用内置主题＆＃34;自定义JS＆＃34;编辑器，CSS类无法应用于div。是的，CSS工作，我在Chrome上以开发人员模式手动添加了类，它给了我以下内容。 Screenshot of result w/ css

但是，每当我输入以下任何JS解决方案时，都不会应用CSS类。

$(".widget-column-1").addClass("footer-widget-1");

$("#widget-column-1").addClass("footer-widget-1");

这些都没有奏效，我也尝试了其他一些解决方案，但不能记住它们。请尽量记住我两天前刚刚开始使用CSS并且还在学习，我不希望我的可怜的小脑袋被一些编码巨头用一个XSS攻击的俱乐部砸进来。

CSS classes I am trying to apply

Answer 1

我已经失去了＆＃34;专业人员数量＃34;程序员使用wordpress制作的网站。我也忘记了使用wordpress的自由开发者制作了多少个网站。所以，不完全是＆＃34; noob＆＃34;事情。

至于您的代码，请尝试在页面加载时运行它：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <1--
<script>

$(document).ready(function () {
    $(".widget-column-1").addClass("footer-widget-1");

    $("#widget-column-1").addClass("footer-widget-1");  
});

</script>

开发人员通常更愿意根据具体情况缩小其选择器，而不是添加！important 。但如果您愿意，我会给您选择使用它：

如果这不起作用，我注意到大多数wordpress开发人员都添加：

!important

到每个CSS声明的结尾......基本上，这会在CSS模板的CSS上增加CSS的优先级。

所以，这将是你的新代码：

.footer {
    background: /*stuff here*/ !important;
    background-repeat: /*stuff here*/ !important;
    background-size: /*stuff here*/ !important;
    background-position: /*stuff here*/ !important;
}

Answer 2

查看截图，对第一个小部件有用的是：

$('[widgetid="footer-widget-1"]').addClass("footer-widget-1");

但是，为了实现这一点，您必须将它放在一个脚本中，该脚本会在您希望发生这种情况的每个页面上加载。你可能想把它包装成

(function($){
    // your jQuery code here...
})(jQuery)

我真正理解的是，当您可以使用现有的class / id / attributes作为您尝试应用的CSS的选择器时，为什么要尝试添加此类。

例如：

 [widgetid="footer-widget-1"] {
   /* CSS for #widget-column-1 here */
 }

...或...

 #widget-column-1 {
   /* CSS for #widget-column-1 here */
 }

如果您将其添加到您的有效主题style.css，它将会起作用。

作为旁注，您可能会发现CSS Selectors和CSS Combinators很有用。另外，为了在CSS中提高效率，您的代码应该适用。你需要两件事：

学习使用任何主要浏览器的开发者控制台进行检查
了解CSS specificity。这将使您快速了解您的选择器需要多强（特定）才能应用规则，而不会破坏其他任何内容。

您可能还想浏览the Codex以确保了解WordPress的工作原理。

不要担心人们质疑你的选择并给你贴上标签。如果它不是一个有用的工具，WordPress将不会如此受欢迎。它带来了很多东西，并免费提供。它正在成为快速开发或REST API的一个非常强大的工具，它正迅速成为Web的支柱。 wp和wp-cli将继续存在。如果您计划在Web开发方面取得进步，那么学习它将会有所帮助。

快乐的编码！（...欢迎来到SO！）::}＆lt;（（* *＆gt; ::

将CSS类添加到具有唯一ID的div

2 个答案: