选择带nth-child的儿童div，然后应用悬停

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

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

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

它在外部容器的第一个儿童div（.uk-home-button div:nth-child(1)）

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

这意味着：找到一个有div父母（妈妈）的div，父母有父母（奶奶）。使用直接的后代选择器>确保一个僵化的特定层次结构，该层次结构仅在妈妈和奶奶被忽略时才狭窄到最深的嵌套div。

当您使用nth选择器（例如child和of-type）时，我们必须牢记这些内容：

1. nth s担心元素在其兄弟姐妹中的位置。

2. nth s担心元素的标签（即 <a>， <div>， <li>）。

3. nth s忽略其他任何东西：类，id，属性等。

4. nth s将其规则应用于所有内容它与（即3个divs在另一个内部，所有3个Divs都将受div:first-child的影响。）

5. 计算兄弟姐妹时，nth-child类型将计算所有兄弟姐妹，而nth-of-type将以相同的标签计数所有兄弟姐妹。

摘要

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

<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:nth-child(1):hover { }

您需要直接后代选择器（>），因为您的.uk-panel-box Divs都是父母的第一子女（非级别的Divs）。因此，您需要第一个Div，即.uk-home-button的 Direct

.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>