CSS选择器：浏览DOM

我写了一个网页，利用几乎所有元素的class和id名称，并意识到这可能不是完成我的样式的最简洁的方式。我一直试图转向更“DOM遍历”的造型方式，但似乎有一种风格覆盖另一种风格。例如我的导航栏如下所示：CSS选择器：浏览DOM

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

...我遇到了麻烦造型的ul内a也没有影响的a的ul之外。我尝试了很多排列nav > ul > li > a以及+选择器，但没有任何运气。这是我做错了什么或有其他的方式来选择只li内ul？

来源

2015-11-06 Jeremy Thomas

发布您尝试过的CSS，您说不起作用。 – j08691

您在锚上有内联样式。删除所有的内联样式，你就可以轻松地改变外观;） –

所以你不想在CSS选择器中使用类名，是你想要使用的约束吗？ – Vivek

的解决方案是什么，你在你的问题表明，使用>， '的直接孩子尝试重新启动浏览器并加载网页，看看是否改变发生尝试。此外，问题可能在于某些元素已被样式化，例如li具有与外部样式表相比具有最高优先级的内联样式。

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

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

来源

2015-11-06 14:58:05 domii

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

这将风格格内的所有li元素与类.dropdown-custom，用相同的风格，而不是造型的.dropdown-custom格以外的任何li元素。

来源

2015-11-06 15:28:09

CSS选择器：浏览DOM

回答

相关问题