相鄰的兄弟選擇器CSS

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中的所有.cart元素，其中任何前一個相鄰的兄弟是.cart 。 元素的第一個沒有此類的前一個兄弟，因此不會被選中。

這稱為通用兄弟選擇器 。

的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;
}

例

請注意，這僅在您使用.cart作為子元素時才有效。 每當另一個班級位於第一個“地方”時，它將無法工作。

Answer 2

使用相鄰的兄弟選擇器在這里不起作用，因為你的元素嵌套在.component-basket ，因此它失敗了。簡單的方法是在你要隱藏的元素上調用一個class ，如果你不能改變DOM那么你可以使用first-child或nth-of-type(1) first-child nth-of-type(1)

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

演示

---

正如@Vucko已經評論過的那樣， nth-of-type()是一個CSS3規范偽。因此，如果你想支持舊瀏覽器，你可以使用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>

這種方法的優點是你可以在任何你想要的地方重用“隱藏”類。