如何隐藏特定标题的div类？

Question

如何在 CSS 或 DOM 中隐藏具有特定标题的 div 类？ 这是 2 个具有不同标题的相同 div 类，我想显示一个并隐藏其他。 如何隐藏其他具有特定标题的任何 CSS 代码或 DOM 代码。

<div class="main-market">
<div class="market-title mt-1">MATCH_ODDS</div>

<div class="main-market">
<div class="market-title mt-1">TIED_MATCH</div>

Answer 1

如果您想使用 JavaScript 进行 DOM 操作来实现此目的，您可以使用 querySelectorAll() 方法和 style 属性迭代元素并隐藏具有特定标题的元素。

const marketTitles = document.querySelectorAll('.main-market .market-title');
marketTitles.forEach(function(title){
    if(title.textContent !== 'MATCH_ODDS'){
        title.style.display = 'none'
    }
});