html - 取决于目标的下拉功能

Question

我在 W3CSchools 上有一个下拉框，我希望将其转换为不太面向类的 CSS(而不是有一堆类，我将通过主要父级选择它)。

这是 HTML:

<nav>
    <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</nav>

(实际上，我不应该在这里上任何课)

这是 CSS:

 /* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

当转换为仅由 nav 元素定位时，这里的一切都工作正常，除了功能性的东西:

.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

我可以尝试将这些转换成，

nav > div:hover nav > div > div {
    display: block;
}
nav > div:hover mav > div > button {
    background-color: #3e8e41;
}

但是没有任何反应。我什至尝试过使用 .dropdown 的主要父类并删除 nav > div 的开头，尽管它也没有返回任何内容。

有什么不同？我针对的是完全相同的元素。

Answer 1

nav > div:hover mav > div > button { mav 应该是 nav 有错别字所以这可能给你带来了问题与测试。

下面是不使用类的相关代码:

/*selects the nav and then select the div that is the immediate child of the nav that is hovered. When that child div  is hovered it selects the first div and sets its display type to block*/ 
nav > div:hover > div:first-of-type{
    display: block;
}
nav > div:hover > button{
    background-color: #3e8e41;
}

/* Style The Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1;}


nav > div:hover > div:first-of-type{
  display: block;
}
nav > div:hover > button{
  background-color: #3e8e41;
}

<nav>
  <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</nav>