Question

我在隐藏重复搜索结果方面遇到了问题。

以下是一个例子：

我们说我有一个销售汽车的网站。我让用户根据品牌，型号等几个属性进行搜索......然后我将所有汽车添加到结果中。（用户可以进行多次搜索）

我搜索＆＃34;品牌A＆＃34;我得到了结果：

car-id-1
car-id-2
car-id-3
car-id-4
car-id-5

现在我重新搜索＆＃34;品牌A＆＃34;和＆＃34;模型A＆＃34;，我得到重复的结果：

car-id-1
car-id-2
car-id-3

我的html是这样的：

<div class='car-id-1'></div>
<div class='car-id-1'></div> /*repeated*/
<div class='car-id-2'></div>
<div class='car-id-2'></div> /*repeated*/
<div class='car-id-3'></div>
<div class='car-id-3'></div> /*repeated*/
<div class='car-id-4'></div>
<div class='car-id-5'></div>

我需要一些选择器，所以我可以从结果中隐藏这些重复的汽车。

我尝试使用：第一类，但我不知道如何使用一条规则来完成所有操作。

这可能有用：

.car-id-3:not(:first-of-type)

但是id来自数据库，所以这不是解决方案，因为我可以向db添加新车。

这甚至可能吗？

Answer 1

您需要了解这些课程，因此您无法盲目搜索匹配。

我建议您使用php或您作为服务器端使用的任何内容将类值推送到<style>块，并在类本身上首先display:none，然后是display:block或.class:fist-of-type上的任何内容。

你可以用js做同样的事情，顺便说一句，你不能只用css来做。

Answer 2

我尝试为每个结果创建每个css规则，但是：first-of-type或：nth-child不起作用，因为你无法使用classe进行过滤。这是一个链接澄清一下：

css3 nth of type restricted to class

我会尝试更改结果附加到页面的方式，因为js对我不起作用......

Answer 3

:first-of-type伪类选择其类型的第一个元素（div，p等）。使用具有该伪类的类选择器（或类型选择器）意味着如果元素具有给定类（或者具有给定类型）则选择元素和是其中的第一个类型兄弟姐妹。

不幸的是，CSS不提供只选择第一次出现的:first-of-class选择器。作为一种解决方法，您可以使用以下内容：

 .car-id-1, .car-id-2, .car-id-3, .car-id-4, .car-id-5 {
    display: none;
 }

 .car-id-1 ~ .car-id-1 ,
 .car-id-2 ~ .car-id-2 ,
 .car-id-3 ~ .car-id-3 ,
 .car-id-4 ~ .car-id-4 ,
 .car-id-5 ~ .car-id-5 {
    display: block;
 }

Check fiddle demo

Css选择器 - 隐藏同一类中的重复元素

3 个答案: