有没有办法将所有元素或所有区域设置为一个类？

Question

我需要将“div”元素中的所有“a”元素设置为一个类。有没有办法使用“div”元素、其他元素或可能的 CSS 来做到这一点，或者没有？我对 HTML 还很陌生。

<ol id='list'><div class="column"><base class="animals">
    <li><a href=""><p>yes</p></a></li>
    <li><a href=""><p>yeah</p></a></li>
    </base>
    </div>
</ol>

我的第一个想法是使用基本元素，但没有真正保留下来。

我正在尝试制作一个搜索栏机制，我需要将所有元素作为一个类来符合 JS：

function search_animal() {
  let input = document.getElementById('searchbar').value;
  input = input.toLowerCase();
  let x = document.getElementsByClassName('animals');
  for (i = 0; i < x.length; i++) {
    if (!x[i].innerHTML.toLowerCase().includes(input)) {
      x[i].style.display = "none";
    } else {
      x[i].style.display = "list-item";
    }
  }
}

Answer 1

如果你想改变 div 内标签的样式（注意你的 div 有“列”类）你可以在你的 css 中添加以下脚本：

.column a { /* here will be css styles */ }

使用提到的选择器，您可以更改 div 中的每个标签。

Answer 2

要设置

<a>

元素的类，只需将

class="your_class"

添加到您的

<a>

元素。我还建议从您的

<p>

元素中删除

<a>

元素。

<a href="" class="your_class">yes</a>

此外，

<base>

元素不是正确的元素。我会把它改成

<div>

.

<ol id="list">
    <div class="column">
        <div class="animals">
            <li><a class="your_class" href="">yes</a></li>
            <li><a class="your_class" href="">yeah</a></li>
        </div>
    </div>
</ol>

Answer 3

首先，允许 OL/UL 作为孩子使用 LI，而不是 base/div 等。而且 base 也不应该那样使用。

我更新了你的 HTML，所以它是正确的，我也删除了 p 标签，因为它们是用于段落文本的。

要通过 CSS 引用所有锚标记，您可以使用 #list a 作为空间自动引用匹配的“孩子”。

更新 有了新信息，我更新了我的答案以包含改进的 javascript 搜索功能。

您可以遍历 querySelectorAll 中的元素并传递选择器，而不需要特定的类。

我还更新了 javascript 以切换活动类以隐藏/显示结果。

function search_animal() {
  let input = document.getElementById('searchbar').value
  input = input.toLowerCase();
  let links = document.querySelectorAll('#list li');
  
  links.forEach((e) => {
    e.classList.toggle("active",e.innerText.toLowerCase().includes(input))
  });
}

let searchbar = document.querySelector("#searchbar");
searchbar.addEventListener("input",search_animal);

li{
  display:none;
}

li.active{
  display:list-item;
}

<input placeholder="Enter in search text here" id="searchbar">
<div class="column">
  <ol id='list'>
    <li>
      <a href="">
        yes
      </a>
    </li>
    <li>
      <a href="">
        yeah
      </a>
    </li>
  </ol>
</div>