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

回答

相關問題