Question

所以我正在网上阅读有关flexbox的教程，并尝试制作一个下拉菜单。但唯一不起作用的是文本修饰：没有效果根本没有效果？我必须使用颜色#ffff使文本变白？

为什么我需要使用+号而且我不能使用＆gt;显示下拉菜单时签名？

＆＃13;

header {
  display: flex;
  width: 100%;
  z-index;
  1000;
  background: linear-gradient(to left, rgba(54, 194, 182, 0.96) 0, rgba(62, 188, 207, 0.96) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
}
header nav ul {
  list-style: none;
  margin 0;
  padding 0;
  display: flex;
  justify-content: start;
}
header nav ul li {
  position: relative;
  flex: 0 1 auto;
}
header nav ul li:hover {
  background: rgba(58, 162, 173, 1);
}
header nav ul li a {
  align-items: flex-start;
  display: flex;
  font-size: 1.55rem;
  font-weight: 200px;
  letter-spacing: 1px;
  max-width: 130px;
  padding: 1rem 1.5rem;
  text-decoration: none;
}
header nav ul li a + ul {
  border-radius: 0 0 2px 2px;
  display: none;
  font-size: 1rem;
  position: absolute;
  width: 195px;
  background: linear-gradient(to bottom, rgba(58, 162, 173, 1) 0, rgba(62, 188, 207, 0.96) 100%);
  ;
}
header nav ul li:hover a + ul {
  display: block;
}

＆＃13;

<header>
  <nav role="navigation">
    <ul>
      <li>
        <a href="/">
              Home
            </a>
      </li>
      <li>
        <a href="/blog">
              Blog
            </a>
        <ul>
          <li><a href="#">Me</a>
          </li>
          <li><a href="#">Gaming</a>
          </li>
          <li><a href="#">Sport</a>
          </li>
          <li><a href="#">Web Design</a>
          </li>
          <li><a href="#">Web Development</a>
          </li>
        </ul>

      </li>
      <li>
        <a href="/contact">      
                Contact      
            </a>
      </li>
      <li>
        <a href="/forum">
                Forum
            </a>
      </li>
    </ul>
  </nav>
</header>

＆＃13;

Answer 1

text-decoration:none;删除了链接的默认下划线，它不会更改颜色。

就像你说的，如果你想要白色文字，请将<a>的颜色设置为white（或等效颜色）：

header nav ul li a {
  align-items: flex-start;
  display: flex;
  font-size: 1.55rem;
  font-weight: 200px;
  letter-spacing: 1px;
  max-width: 130px;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color:white;
}

Updated JSFiddle

为什么我需要使用+号而且我不能使用＆gt;显示下拉菜单时签名？

我假设您在CSS中引用了类似header nav ul li a + ul的选择器。这是因为+和>组合子具有不同的含义。 +是相邻的兄弟组合子，所以在这种情况下：

<a href="/blog">Blog</a> Hover over the a
<ul></ul> Select the ul that is an adjacent sibling

甚至不需要这个组合器，您可以这样做：

header nav ul li > ul

选择<ul>

的孩子<li>

Answer 2

text-decoration不会改变颜色，它会删除下划线的锚点

需要直接兄弟选择器+，因为目标元素不是a元素的子元素，它是兄弟元素

因此，当您使用此类规则时，您需要+

header nav ul li:hover a + ul {
  display: block;
}

但如果你这样更改，可以使用>

header nav ul li:hover > ul {
  display: block;
}

CSS text-decoration：none;没有工作

2 个答案: