選擇其中嵌套

Question

我的語法看起來像這樣相鄰的元素：

<div class="parent"> 
    <div class="child">content</div> 
</div> 
<div class="parent"> 
    <div class="child">content</div> 
</div> 
<div class="parent"> 
    <div class="child">content</div> 
</div> 

我想樣式子元素這是兄弟，是這樣的：

.parent .child + .parent .child { 
/* Some pretty nice styles */ 
} 

不幸的是這段代碼無法工作。純粹的CSS3有可能或僅在未來的版本4中可用？

Answer 1

.parent + .parent .child{ 
 
     background-color: red; 
 
     height: 100px; 
 
     width: 100px; 
 
    }

<div class="parent"> 
 
    <div class="child">content</div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child">content</div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child">content</div> 
 
</div>

這可能工作。那是你要的嗎？但它會讓孩子們考慮父母是否彼此關注。所以它並不真正關心孩子。

如果你真的想只是根據孩子你可以考慮一個jQuery的解決方案選擇（你沒有在jQuery標記，以便...）

Answer 2

由於括號不CSS如此存在，它讀取，

.parent .child + .parent .child

爲「家長裏孩子立即家長裏子以下」。所以基本上你選擇：

<div class = "parent"> 
    <div class = "child"></div> 
    <div class = "parent"> 
     <div class = "child"></div> 
    </div> 
</div> 

正如前面評論者指出，一個解決辦法是parent1和parent2之間交替，並與.parent1 + .parent2選擇的div。

Answer 3

你的問題還不清楚。添加更多細節。檢查這些Selectors

兒童組合子

相鄰的兄弟組合子

一般的兄弟姐妹Combinator的

你的CSS的意思，

.parent .child + .parent .child { 
/* Some pretty nice styles */ 
} 

父母與孩子，然後與孩子另一位家長。風格將適用於第二位父母的孩子。

例：

.parent .child + .parent .child { 
 
    color: red; 
 
}

<div class="parent"> 
 
    a 
 
    <div class="child"> 
 
    b 
 
    </div> 
 
    <div class="parent"> 
 
    a 
 
    <div class="child"> 
 
     b 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="parent"> 
 
    a 
 
    <div class="child"> 
 
    b 
 
    </div> 
 
    <div class="parent"> 
 
    a 
 
    <div class="child"> 
 
     b 
 
    </div> 
 
    </div> 
 
</div>