Question

尽管这是一个简单的问题，但我无法理解为什么我无法设置嵌套ul的样式。

HTML：

<div class="footer-left">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li>
      <ul>
        <li><a href="#">select1</a></li>
        <li><a href="#">select2</a></li>
        <li><a href="#">select3</a></li>
      </ul>
    </li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

CSS：

.footer-left ul ul li {
  border: 1px solid #fff;
  color: #fff;
}

任何想法？提前感谢大家的时间和关注。

Answer 1

试试这个边框。 .footer-left ul li ul li {}

和href颜色 .footer-left ul li ul li a {}

Answer 2

实际上一切都在那里工作。

以下是更改颜色的代码：

.footer-left ul ul li {
  border: 1px solid black;
  color: red;
}

<div class="footer-left">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li>
      <ul>
        <li><a href="#">select1</a></li>
        <li><a href="#">select2</a></li>
        <li><a href="#">select3</a></li>
      </ul>
    </li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

请注意，如果您希望<a>元素具有不同的颜色，则需要单独为它们着色：

.footer-left ul ul li {
  border: 1px solid black;
  color: red;
  background: black;
}

.footer-left ul ul li a {
  color: white;
}

<div class="footer-left">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li>
      <ul>
        <li><a href="#">select1</a></li>
        <li><a href="#">select2</a></li>
        <li><a href="#">select3</a></li>
      </ul>
    </li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

Answer 3

如果您希望链接颜色为白色（#fff），请尝试以下css：

.footer-left ul ul li {
    border: 1px solid #fff;
}

.footer-left ul ul li a:link {
    color: #fff;
}

Answer 4

你可以使用类，因为它不会混淆链接选择器

＆＃13;

.footer-left ul.child>li {
  border: 1px solid #fff;
  color: #fff;
  background:#ddd;
}
.footer-left ul.child>li>a {
 color:tomato;
}

＆＃13;

<div class="footer-left">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li>
      <ul class="child">
        <li><a href="#">select1</a></li>
        <li><a href="#">select2</a></li>
        <li><a href="#">select3</a></li>
      </ul>
    </li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

＆＃13;

无法将ul样式嵌套在另一个ul中

4 个答案: