第一个孩子不在里面工作：悬停

Question

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

Codepen example

＆＃13;

＆＃13;

DialogPane

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个＆amp ;:hover＆gt; ul {}可能会对你有帮助。

Answer 3

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

不应该这样吗？

Answer 4

如果将sass转换为css，则执行ul:first-child { background: green; }。 设为ul li:first-child { background: green; }，它应该可以正常工作。