CSS樣式適用於所有問題

-1

我想在我的一個頁面上創建一個水平導航欄，所以我使用了一個列表，然後在CSS中進行了編輯。但是，同一個頁面也有其他列表，當我應用了它爲導航欄工作的樣式時，卻完全摧毀了其他列表！我該如何解決這個問題？我已經嘗試過ID標籤，但是我不知道他們否決將某種樣式應用於所有列表？這是我的CSS代碼：CSS樣式適用於所有問題

#menubar { 

list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #85aff2; 

} 

li { 

float: left; 

} 

li a { 

display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 

}

網頁上的所有列表都是「標準」的名單，即它們都是沼澤標準<ul>或<ol>沒有ID標籤 - 除了導航欄列表，我稱之爲'菜單欄'。

來源

2017-02-24 shadowmoses__

請添加您的html代碼 – Sankar

對於需要應用像#menubar也爲它的子元素的ID，如果你只希望他們內部的menubar

申請看menubar風格例如：

#menubar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #85aff2; 
 
} 
 

 
#menubar li { 
 
    float: left; 
 
} 
 

 
#menubar li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
}

<ul id="menubar"> 
 
    <li><a>one</a></li> 
 
    <li><a>two</a></li> 
 
    <li><a>three</a></li> 
 
</ul> 
 

 
<ul> 
 
    <li><a>normal one</a></li> 
 
    <li><a>normal two</a></li> 
 
    <li><a>normal three</a></li> 
 
</ul>

來源

2017-02-24 12:14:13 caramba

您的CSS的問題是您將樣式應用於所有'li'和'li a'元素。讓它起作用的最好方法是更具體一些你想要應用CSS的地方。

請嘗試以下操作（使用上面的代碼）。

#menubar { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #85aff2; 
} 

#menubar li{ 
    float: left; 
} 

#menubar li a{ 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
}

來源

2017-02-24 12:15:06

-1

有解決此幾種方法，但我認爲在這一點上，最實用的方法是使用:not()選擇與您的列表和排除#menubar。

例如，如果你的#menubar是ID爲li，您可以添加這樣的：

li:not(#menubar) { 
    /* your css */ 
} 

li:not(#menubar) a { 
    /* your css */ 
}

編輯28/02

我的理解是，你有你的單槓與#navmenu和你的CSS的其餘部分，你不想在其中生效。如果這就是你想要的，這個解決方案確實有效。因爲它在jsfiddle上進行了測試。

https://jsfiddle.net/a2kj8vds/

來源

2017-02-24 12:15:31

@MrLister它確實有效。爲你做了一個jsfiddle。檢查編輯。在說它不起作用之前，你應該測試它。 –

我應該說「這不能解決OP的問題」。事實上，你可以做一個小提琴，做你所說的事，並不意味着它是有幫助的。 –

@MrLister OP正在詢問一種方法來修改列表而不影響他的MenuBar中的列表（正如我的理解）。如果他這樣做，它的工作。抱歉，我理解錯了。不是嗎？ –

如果不指定ID或一類風格將影響每一個匹配的元素。

在你的榜樣，id爲你的風格元素「菜單欄」，然後你所有樣式「禮」的元素，最後所有的「禮」和「a」的元素。

如果你希望你的風格只適用於您的導航菜單項，你可以給他們像「nav_menu」一類，並寫這樣的風格：

.nav_menu { 
    float: left; 
} 
.li_and_a { 
    display: block; 
    color:white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
}

所以用列表項float現在需要類「nav_menu」，列表項和一個項需要「li_and_a」類。除非他們有一個特定的類

這樣做不會影響任何其他的「李」或在網頁上「一」的元素。

來源

2017-02-24 12:15:37 FMashiro

CSS樣式適用於所有問題

回答

相關問題