Question

CSS ID选择器的用法

下面的代码是个很简单的导航条的代码，我想针对<li><a href="#" id="first">Home</a></li>单独设置样式，因此加了id="first"这个ID选择器，但是发现如果设置#first样式不能起作用，只有设置
#navigation #first才起作用，这是什么原因呢？附主要代码如下

<style>

#navigation
{

font-family:Arial;font-size:14px;text-align:left;

}

#navigation
ul {

list-style-type:none;margin:0px;padding:0px;

}

#navigation
li {

border-bottom:1px
solid #9F9FED;float:left;width:180px;

}

#navigation
li a{

display:block;

padding:5px
0.5em 5px 5px ;

text-decoration:none;

border-left:6px
solid #151571; /* 左边的粗边
*/

border-right:6px
solid #151571; /* 右侧阴影
*/

}

#navigation
#first{

border-left:20px
solid #151571;

}

#navigation
a:hover#first{

border-left:20px
solid yellow;

}

#navigation
li a:link, #navigation li a:visited{

background-color:#1136c1;color:#FFFFFF;

}

#navigation
li a:hover{ /* 鼠标经过时
*/

background-color:#002099;
/* 改变背景色 */

color:#ffff00;
/* 改变文字颜色 */

border-left:6px
solid yellow;

border-right:6px
solid yellow;

}

</style>

<div
id="navigation">

<ul>

<li><a
href="#" id="first">Home</a></li>

<li><a
href="#">Contact us</a></li>

<li><a
href="#">Web Dev</a></li>

<li><a
href="#">Web Design</a></li>

<li><a
href="#">Map</a></li>

</ul>

</div>

Answer 1

因为你的a标签已经有了一个更高优先级的样式生效，就是这个：li a{}

你的first要起作用，就必须优先级大于它，#navigation #first是可以，li a#first也可以 li #first也可以。

css优先度是很简单的，你可以百度了解一下。