Question

是否可以在纯CSS中设置第n个兄弟的样式？
例如，当我将鼠标悬停在第一个.child上时，我们可以设置第4个或第5个.child的样式吗？

<div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

更新我想我的问题不正确。对不起。

我的意思是，我可以选择我徘徊的。童年的第n个兄弟吗？

即。在1-.child上悬停时，样式为第4 .child个;样式悬停在2-nd等时的第5个.child

Answer 1

当然可以。您将general sibling selector (~)与<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div> <div> <figure class="figure"><img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" /></figure> </div> <div class="css-popover">User detail: ... bla bla bla ...</div> </div>结合使用。

:hover

.child:first-of-type:hover ~ .child:nth-of-type(4) {
  color: red;
}

〜combinator分隔两个选择器，只有当第一个元素以第一个元素开头时才匹配第二个元素，并且它们共享一个共同的父元素。

更新

更新我想我的问题有点不正确。对不起。

我的意思是我可以选择徘徊的第n个兄弟。孩子？

不，因为据我所知，没有办法“计算兄弟姐妹”。你可以解决这个问题，假设你想在悬停时突出显示每个<div class="parent"> <div class="child"> 1 </div> <div class="child"> 2 </div> <div class="child"> 3 </div> <div class="child"> 4 </div> <div class="child"> 5 </div> </div>的第二个兄弟。

.child

.child:nth-of-type(1):hover ~ .child:nth-of-type(3) {
  color: red;
}

.child:nth-of-type(2):hover ~ .child:nth-of-type(4) {
  color: red;
}

.child:nth-of-type(3):hover ~ .child:nth-of-type(5) {
  color: red;
}

.child:nth-of-type(4):hover ~ .child:nth-of-type(6) {
  color: red;
}

.child:nth-of-type(5):hover ~ .child:nth-of-type(7) {
  color: red;
}

要简化此任务，您可能需要使用SASS之类的预处理器：

<div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

将在CSS上生成。

Answer 2

当然可以

.child:nth-child(1):hover ~ .child:nth-child(4),
.child:nth-child(1):hover ~ .child:nth-child(5) {
  background-color: orange;
}

<div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

Answer 3

.child {
  border: 1px solid;
  width: 3em;
  height: 3em;
  text-align: center;
  line-height: 3em;
}

.child:first-child:hover~.child:nth-child(4),
.child:first-child:hover~.child:nth-child(5) {
  background-color: red;
}

<div class="parent">
  <div class="child"> 1 </div>
  <div class="child"> 2 </div>
  <div class="child"> 3 </div>
  <div class="child"> 4 </div>
  <div class="child"> 5 </div>
</div>

Answer 4

是的，可以使用“nth-child（index）”

CSS

.parent .child:nth-child(3):hover{
  background-color:red;
}

3是孩子的指数。谢谢我以后。

CSS：风格nth兄弟

4 个答案:

更新