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样式适用于所有问题

回答

相关问题