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

Question

所以，我对 CSS 真的很陌生。我正在为我工​​作的公司开发一个网站，使用 WordPress。我知道，WordPress“NOOB ALERT”。不管怎样，我正在使用大量的动态主题，希望能得到一些帮助。我创建了三个 CSS 类，我想将它们应用到三个具有唯一 ID 的不同 div。

• 小部件列 1

• widget-column-2

• widget-column-3

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

• footer-widget-1

• footer-widget-2

• footer-widget-3

分别对应它们的编号。但是，当我使用主题内置的“自定义 JS”编辑器尝试以下任何方法时，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

查看您的屏幕截图，第一个小部件的工作方式是:

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

但是，为了让它起作用，您必须将它放在一个脚本中，该脚本会加载到您希望它发生的每个页面上。你可能想把它包装成一个

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

---

我不太明白的是，当您可以使用现有的类/id/属性作为您尝试应用的 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 的工作原理。