Question

CSS定义样式ul#nav{}和 #nav ul{}有什么区别

ul#nav{} 和 #nav ul{} 有什么区别?

Answer 1

首先需要明白CSS选择器使用到"#"就是表示这是html文档中的某个带id的元素。

例如html代码：

<ul>
  <li>主页</li>
  <li id="nav">产品</li>   <!--  选中这行的li元素   -->
  <li>联系我们</li>
</ul>

CSS中用ul#nav{}就选中ul列表中的第二个li。如果：

ul#nav{
  color: #F60;
}

就是把ul列表中的第二个li字体颜色设置成#F60

例如html代码：

<div id="nav>
    <ul>       <!--  选中这个ul元素   -->
      <li>主页</li>
      <li>产品</li>   
      <li>联系我们</li>
    </ul>
</div>
<div>
    <ul>       <!--  这个ul元素没有被选中   -->
      <li>主页</li>
      <li>产品</li>   
      <li>联系我们</li>
    </ul>
</div>

CSS中用#nav ul{}选中的是id是nav的元素中的ul列表，具体上例就是<div id="nav" />中的ul列表。如果：

#nav ul{
  color: #F60;
}

那么<div id="nav" />中的ul列表的字体的颜色被设置成#F60，其他的ul列表不受影响。

Answer 2

ul#nav{}
代表着 寻找以ul为代表的 ID名字叫nav的元素

#nav ul{}
代表 寻找ID名字叫nav的元素 然后它下面的叫ul的HTML的标签

Answer 3

ul#nav{}这个的意思是，文章里面ul的id为nav的样式

#nav ul{}这个的意思是，ID为nav的盒子里面的ul样式

Answer 4

ul#nav{}：ul元素且id为nav；

#nav ul{}：id为nav的元素的子元素ul

Answer 5

ul#nav{}
是指id为 nav的ul的样式
#nav ul{}
是指id为nav元素下 ul的样式