Question

我的Div中有2个元素，两个都有相同的类名，我想隐藏我的第一个元素使用类名 .cart 。我正在使用以下代码。

.component-bottom  .component-basket + .cart{
     display:none;
}

我添加了我的html结构：

<div class="component-bottom">
  <div class="component-basket">
    <div class="cart">
    </div>
    <div class="cart">
    </div>
  </div>
</div>

我使用的是正确的代码吗？

请建议我..

Answer 1

您可以为.cart元素使用直接子选择器：

.component-bottom .component-basket > .cart
{
     display:none;
}

现在你只想要这个选择器的第一个元素。没有原始选择器，但您可以为此创建一个覆盖选择器。
您可以覆盖除第一个之外的所有内容 ElementA ~ ElementB：

.component-bottom .component-basket > .cart ~ .cart
{
    display:block;
}

搜索.cart内的所有.component-basket元素，其中 ANY 以前的相邻兄弟.cart。第一个元素没有此类的前一个兄弟，因此不会被选中。

这称为general sibling selector。

jsFiddle

这应该支持IE7及以上版本：

注意需要Windows Internet Explorer 7或更高版本。

来源：http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx

@jrConway评论的更简单的解决方案：

默认情况下显示：阻止并使用：

.component-bottom .component-basket > .cart:first-child
{
     display: none;
}

<强> Example

请注意，这只适用于仅使用.cart作为子元素的情况。每当其他班级位于第一个“地方”时，它将无效。

Answer 2

使用相邻的兄弟选择器在这里不起作用，因为你的元素嵌套在.component-basket内，因此它失败了。简单的方法是在要隐藏的元素上调用class，如果您无法更改DOM，而无法使用first-child或nth-of-type(1)

.component-bottom .component-basket div.cart:nth-of-type(1) {
     display:none;
}

Demo

正如@Vucko已经评论过，nth-of-type()是一个CSS3规范伪... 因此，如果您想使用support旧版浏览器，则可以使用Selectivizr，这样可以节省很多课程/ ID。

Answer 3

据了解，请检查这可能会有所帮助

CSS

.cart{
    display:none;
}

.component-bottom  .component-basket
{
    //some common properties
}

HTML

<div class="component-bottom">
    <div class="component-basket cart">component-basket Hidden div</div>
    <div class="component-basket">component-basket visible div</div>
</div>

这将使用购物车类（第一个div）隐藏div

谢谢，

DHIRAJ

Answer 4

将其粘贴在CSS文件中：

.hide {
    display: none;
}

然后将该类添加到您想要隐藏的任何元素中，如下所示：

<div class="component-bottom">
    <div class="component-basket">Foo</div>
    <div class="component-basket cart hide">Foo</div>
</div>

这种方法的优点是可以在任何地方重复使用“隐藏”类。

相邻的兄弟选择器CSS

4 个答案:

jsFiddle