Question

我正在尝试让nth-child处理一组div，然后将hover伪应用于它：

<div class="uk-home-button">
    <div>
        <div class="uk-panel-box"></div>
    </div>
    <div>
        <div class="uk-panel-box"></div>
    </div>
    <div>
        <div class="uk-panel-box"></div>
    </div>
    <div>
        <div class="uk-panel-box"></div>
    </div>
</div>

继承人我认为我能做什么

.uk-home-button div.uk-panel-box:nth-child(1):hover{background-color:#2980b9;}

但它不是选择div 1，而是将css应用于所有四个div

Answer 1

  div > div > div:hover {
    background: red;
  }

这意味着：找一个div父母（妈妈）并且父母有父母（祖母）的div。使用直接后代选择器>可以确保一个严格特定的层次结构，只有在忽略妈妈和奶奶时才会缩小到最深的嵌套div。

当您使用nth和child等of-type选择器时，我们必须牢记以下事项：

nth关注元素在其兄弟姐妹中的位置。
nth关注元素的标记（即<a>，<div>，<li>）。
nth忽略其他任何内容：class，id，attributes等。
nth会将其规则应用于与其相关的所有（即3个div在另一个内部，所有3个div都会受到{{{ 1}}）。
在计算兄弟姐妹时，div:first-child类型会计算所有兄弟姐妹，而nth-child会计算所有兄弟姐妹使用相同的标记。

段

＆＃13;

nth-of-type

＆＃13;

div {
  border: 1px solid black;
  height: 30px;
  width: 150px;
  padding: 3px;
}
.uk-panel-box {
  width: 75%;
  height: 75%;
  border-color: orange;
}
.uk-home-button {
  height: 150px;
  width: 200px;
  border-color: blue;
}
div > div > div:hover {
  background: red;
}

＆＃13;

Answer 2

如果您只想在第一个框中使用悬停效果，请使用此选择器：

.uk-home-button div:nth-child(1) .uk-panel-box:hover {
  background-color: #2980b9;
}

http://codepen.io/anon/pen/aBKXQw

它选择外容器的第一个子div内的.uk-panel-box（.uk-home-button div:nth-child(1)）

Answer 3

你需要：

.uk-home-button > div:nth-child(1):hover { }

您需要直接后裔选择器（>），因为您的.uk-panel-box div也是其父母的第一个孩子（非入级div）。因此，您需要第一个div，它是直接 .uk-home-button的第一个孩子。

.uk-home-button > div:nth-child(1):hover {
  background-color: #2980b9;
}

<div class="uk-home-button">
  <div>
    <div class="uk-panel-box">1</div>
  </div>
  <div>
    <div class="uk-panel-box">2</div>
  </div>
  <div>
    <div class="uk-panel-box">3</div>
  </div>
  <div>
    <div class="uk-panel-box">4</div>
  </div>
</div>

选择具有nth-child的子div并应用悬停

3 个答案:

段