第一个孩子不在里面工作：悬停[重复]答案

【问题标题】：First-child not working inside :hover [duplicate]第一个孩子不在里面工作：悬停[重复]
【发布时间】：2017-08-27 20:59:14
【问题描述】：

这段代码不起作用 - 这是我的代码示例：

Codepen example

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul a {
  color: #333333;
  text-decoration: none !important;
  display: block;
  font-size: 16px;
  padding: 10px 15px;
}
ul li {
  position: relative;
  display: inline-block;
}
ul li:hover {
  background: #f7f7f7;
}
ul li:hover ul:first-child {
  background: green;
}
ul li ul {
  position: absolute;
  min-width: 150px;
  top: 100%;
  left: 0;
  background: #f7f7f7;
  padding: 10px 0;
}
ul li ul li {
  display: block;
}
ul li ul li ul {
  top: -10px;
  left: 100%;
}

<ul>
  <li>
    <a href="{{ server.URI }}products/">{{ langs.Products }}Menu</a>
    <ul>
      <li>
        <a href="">menu</a>
        <ul>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
            <ul>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="{{ server.URI }}services/">{{ langs.Services }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}news/">{{ langs.News }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}about/">{{ langs.About }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}contact/">{{ langs.Contact }}</a>
  </li>
</ul>

【问题讨论】：

标签： html css sass css-selectors

【解决方案1】：

您可以使用first-of-type 选择器来代替first-child：

 ul li:hover > ul:first-of-type

请注意，> 选择器确保最近的后代 ul 仅被定位 - 请参阅下面的演示和 updated codepen：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul a {
  color: #333333;
  text-decoration: none !important;
  display: block;
  font-size: 16px;
  padding: 10px 15px;
}
ul li {
  position: relative;
  display: inline-block;
}
ul li:hover {
  background: #f7f7f7;
}
ul li:hover > ul:first-of-type {
  background: green;
}
ul li ul {
  position: absolute;
  min-width: 150px;
  top: 100%;
  left: 0;
  background: #f7f7f7;
  padding: 10px 0;
}
ul li ul li {
  display: block;
}
ul li ul li ul {
  top: -10px;
  left: 100%;
}

<ul>
  <li>
    <a href="{{ server.URI }}products/">{{ langs.Products }}Menu</a>
    <ul>
      <li>
        <a href="">menu</a>
        <ul>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
            <ul>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="{{ server.URI }}services/">{{ langs.Services }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}news/">{{ langs.News }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}about/">{{ langs.About }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}contact/">{{ langs.Contact }}</a>
  </li>
</ul>

【讨论】：

【解决方案2】：

试试这个 &:hover>ul {} 可能对你有帮助。

【讨论】：

不，这不行

【解决方案3】：

&:hover {
   background: #f7f7f7;
    // first ul
     ul {
           li:first-child {
           background: green;
          }
        }
      }

不应该是这样吗？

【讨论】：

【解决方案4】：

如果 sass 被转译成 css，你可以使用ul:first-child { background: green; }。设置为ul li:first-child { background: green; }，它应该可以正常工作。

【讨论】：