Question

我试图将CSS样式插入到h1类元素中。它在我更新mmy主题之前工作，但由于某种原因它现在不起作用。谁知道为什么？

我已经尝试过getElementsByClassName和[0]来查找数组，没有什么对我有用。 CSS类有display：none，因为我希望标题只显示在包含类“product_title entry-title”的页面上。因此，当它找到该类时，它应该将一个CSS类放到要显示的元素：block，以便它显示在那些页面上。

z=document.querySelector("product_title entry-title");
	z.style.display="block";

#content h1:first-child {
    padding-top: 0px;
  	display:none;
}

<h1 class="product_title entry-title">Arkham Horror</h1>

Answer 1

在使用querySelector选择元素时，您缺少点.。需要使用.选择使用它的类的元素。

另外一个类就足以选择元素

var z = document.querySelector(".product_title");
z.style.display = "block";

#content h1:first-child {
  padding-top: 0px;
  display: none;
}

<section id='content'>
<h1 class="product_title entry-title">Arkham Horror</h1>
</section>

Answer 2

您需要先声明变量。此外，querySelectorAll的工作方式与CSS选择器相同，因此您需要在类中添加点以供querySelector查找。

 var z = document.querySelector(".product_title.entry-title");
 z.style.display="block";

请记住，这将只选择那些类的第一个H1，所以你的：第一个孩子在这里有点矫枉过正。

Answer 3

您似乎误解了querySelector方法的使用。不是仅列出所有由空格分隔的所需元素的类，而是每个类名必须以句号.开头，如果所需元素有多个类，则类之间不应有空格。。请参阅更正后的代码段：

＆＃13;

var z=document.querySelector(".product_title.entry-title");
z.style.display="block";

＆＃13;

h1 {
    padding-top: 0px;
  	display:none;
}

＆＃13;

<h1 class="product_title entry-title">Arkham Horror</h1>

＆＃13;

Answer 4

使用jQuery .css（）方法更改css属性。它将适用于选择器选择的所有元素（在这种情况下，它是＆＃39; h1＆＃39;）如果您只想更改一个元素，请添加.first（）

＆＃13;

$('h1').first().css("color", "red");
$('h1').css("display", "block");

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<h1>Title</h1>

＆＃13;

Javascript / jQuery - 将CSS样式应用于类元素

4 个答案: