CSS使用名称从列表中隐藏项目

Question

我以前从未使用过CSS(我是WordPress用户(。但我觉得我已经很接近了，但我不知道自己做错了什么。

所以，我有这个列表<li>项目，我想隐藏。我尝试使用第n个子项，但没有成功，因为列表的顺序可能会根据字段是否填充而变化。所以，我需要使用一个数据选择器。我试过这个：

.atbd_listing_data_list {
li[data-value="Breed : "]
visibility: hidden;} 

但这并没有奏效。这是它的来源代码：

<div class="atbd_listing_data_list">
<ul>
<li>Pedigree: Fly x Hors la loi II x Concorde</li>
<li>Competition height: </li>
<li>Age Category: </li>
<li>Age: 15</li>
<li>Color: </li>
<li>Height: </li>
<li>Studbook: </li>
<li>Gender: </li>
<li>Breed: </li>
<li>
<p><span class="la la-clock-o"></span>October 25, 2020
</p>
</li>
</ul>
</div>

我只是想隐藏"品种"one_answers"年龄类别"字段，但我已经尝试了几个小时，但没有成功。

有人想教我一些CSS以及如何处理它吗：(？我想我差不多到了，一定是我犯了一个小错误。

问候，

科林

Answer 1

此答案假定您无法编辑生成列表的文件或列表的模板

好吧，公平地说，这些CSS规则更多的是"；黑客攻击"；而不是实际解决问题。但我能理解你是从哪里来的。应该有另一种方法在不隐藏数据的情况下解决问题。

如果你走在正确的道路上，:nth-child选择器非常适合为"；静态列表"；(从当前点算起的第n个子计数，如果此列表较短，则其他数据将隐藏(。

只有当<li data-value="breed">是元素时，[data-value="breed"]才会工作。这不是一个"；数据包含值"0"；一种选择器。

.atbd_listing_data_list ul li:nth-child(3),
.atbd_listing_data_list ul li:nth-child(9) {
display: none;
}

<div class="atbd_listing_data_list">
<ul>
<li>Pedigree: Fly x Hors la loi II x Concorde</li>
<li>Competition height: </li>
<li>Age Category: </li>
<li>Age: 15</li>
<li>Color: </li>
<li>Height: </li>
<li>Studbook: </li>
<li>Gender: </li>
<li>Breed: </li>
<li>
<p><span class="la la-clock-o"></span>October 25, 2020
</p>
</li>
</ul>
</div>

Answer 2

您必须将数据属性添加到要隐藏的li中，然后选择它，如示例所示。

li[data-value="hide"] {
display: none; 
}

<div class="atbd_listing_data_list">
<ul>
<li>Pedigree: Fly x Hors la loi II x Concorde</li>
<li>Competition height: </li>
<li>Age Category: </li>
<li>Age: 15</li>
<li>Color: </li>
<li>Height: </li>
<li>Studbook: </li>
<li>Gender: </li>
<li data-value="hide">Breed: </li>
<li>
<p><span class="la la-clock-o"></span>October 25, 2020
</p>
</li>
</ul>
</div>