Question

我为几乎所有元素编写了一个使用class和id名称的网页，并意识到这可能不是完成我的样式的最简洁方法。我一直在努力转向更多＆＃34; DOM Traversing＆＃34;造型的方式，但似乎有一种风格覆盖另一种风格的问题。例如，我的导航栏如下所示：

<nav>
  <li class="navbar--link"><a href="#">Link 1</a></li>
  <ul class="dropdown-custom" id="1">
    <li><a style="color: black" href="#">Client 1</a></li>
    <li><a style="color: black" href="#">Client 2</a></li>
    <li><a style="color: black" href="#">Client 3</a></li>
    <li><a style="color: black" href="#">Client 4</a></li>
  </ul>

  <li class="navbar--link"><a href="#">Link 2</a></li>
  <ul class="dropdown-custom" id="2">
    <li><a style="color: black" href="#">Peabody, MA</a></li>
    <li><a style="color: black" href="#">Newton, MA</a></li>
    <li><a style="color: black" href="#">Dallas, TX</a></li>
    <li><a style="color: black" href="#">Houston, TX</a></li>
  </ul>

  <li>LOGO</li>

  <li class="navbar--link"><a href="#">Link 3</a></li>
  <ul class="dropdown-custom" id="3">
    <li><a style="color: black" href="#">1</a></li>
    <li><a style="color: black" href="#">2</a></li>
    <li><a style="color: black" href="#">3</a></li>
    <li><a style="color: black" href="#">4</a></li>
  </ul>

  <li class="navbar--link"><a href="#">Link 4</a></li>
  <ul class="dropdown-custom" id="4">
    <li><a style="color: black" href="#">A</a></li>
    <li><a style="color: black" href="#">B</a></li>
    <li><a style="color: black" href="#">C</a></li>
  </ul>
</nav>

...我在a内设置ul样式时遇到了问题，但没有影响a之外的ul。我尝试使用许多排列nav > ul > li > a以及+选择器，但没有任何运气。这是我做错了还是有其他方法只选择li中的ul？

Answer 1

解决方案正如您在问题中所表明的那样，尝试使用＆＃39;直接孩子的＆＃39; > ，尝试重新启动浏览器并加载页面以查看是否发生了更改。问题还在于某些元素已被设计，例如，li具有内嵌样式，与外部样式表相比具有最高优先级。

＆＃13;

nav > ul > li > a 
{
 text-decoration:none; 
 }
nav > li > a
{
  color:green;
  }

＆＃13;

<nav>
  <li class="navbar--link"><a href="#">Link 1</a></li>
  <ul class="dropdown-custom" id="1">
    <li><a style="color: black" href="#">Client 1</a></li>
    <li><a style="color: black" href="#">Client 2</a></li>
    <li><a style="color: black" href="#">Client 3</a></li>
    <li><a style="color: black" href="#">Client 4</a></li>
  </ul>

  <li class="navbar--link"><a href="#">Link 2</a></li>
  <ul class="dropdown-custom" id="2">
    <li><a style="color: black" href="#">Peabody, MA</a></li>
    <li><a style="color: black" href="#">Newton, MA</a></li>
    <li><a style="color: black" href="#">Dallas, TX</a></li>
    <li><a style="color: black" href="#">Houston, TX</a></li>
  </ul>

  <li>LOGO</li>

  <li class="navbar--link"><a href="#">Link 3</a></li>
  <ul class="dropdown-custom" id="3">
    <li><a style="color: black" href="#">1</a></li>
    <li><a style="color: black" href="#">2</a></li>
    <li><a style="color: black" href="#">3</a></li>
    <li><a style="color: black" href="#">4</a></li>
  </ul>

  <li class="navbar--link"><a href="#">Link 4</a></li>
  <ul class="dropdown-custom" id="4">
    <li><a style="color: black" href="#">A</a></li>
    <li><a style="color: black" href="#">B</a></li>
    <li><a style="color: black" href="#">C</a></li>
  </ul>
</nav>

＆＃13;

Answer 2

.dropdown-custom > li {
    //style li here
}

这将使用类.dropdown-custom设置div中所有li元素的样式，具有相同的样式，而不会在.dropdown-custom div之外设置任何li元素的样式。

CSS选择器：导航DOM

2 个答案: