javascript - CSS（多个ID）+（类）的正确语法是什么

Question

我的问题是 CSS 语法。我想将 CLASS(.fade) 添加到多个 ID（titletext1 和 titletext2 或更多...）。我写它的方式不起作用。如果我不想将它们组合在一起，而不是将它们写在单独的行中，那么正确的语法是什么？

document.getElementById('titletext1').classList.add('fade');
document.getElementById('titletext2').classList.add('fade');

#titletext1.fade,
#titletext2.fade {
  opacity: 1;
  top: 5px;
}

<h1 class="titletext" id=titletext1>This is a Title!!</h1>
<h1 class="titletext" id=titletext2>A second Title!!</h1>

谢谢

标签： javascripthtmlcss

Answer 1

只需将这两个类与.分隔符连接在一起#{id}.{class}.{class}：

#titletext1.titletext.fade,
#titletext2.titletext.fade {
  color: red;
}

<h1 class="titletext fade" id=titletext1>This is a Title!!</h1>
<h1 class="titletext fade" id=titletext2>A second Title!!</h1>

<h1 class="titletext" id=titletext1>Without fade</h1>
<h1 class="titletext" id=titletext2>Without fade</h1>

<h1 class="fade" id=titletext1>Without titletext</h1>
<h1 class="fade" id=titletext2>Without titletext</h1>

虽然请注意，如果没有 ID，您可以组合两个选择器并仍然以两个元素为目标：

.titletext.fade {
  color: red;
}

<h1 class="titletext fade" id=titletext1>This is a Title!!</h1>
<h1 class="titletext fade" id=titletext2>A second Title!!</h1>

<h1 class="titletext" id=titletext1>Without fade</h1>
<h1 class="titletext" id=titletext2>Without fade</h1>

<h1 class="fade" id=titletext1>Without titletext</h1>
<h1 class="fade" id=titletext2>Without titletext</h1>