css中这些组合代表什么含义？

html-css09

css中这些组合代表什么含义？,第1张

li.pic 选择 html 结构为 li 且 class 为 .pic 的元素：

<li class="pic">123</li>

注意 li.pic 和 li .pic的区别，li .pic 则选择 li 下面 class 为 .pic 的元素：

<li><a class="pic">123</a></li>

div#nav 和上面 li.pic 一样的，只是 class 换成了 id，也要注意和 div #nav 的区别

#nav .pic 选择 id 为 nav 的元素下面 class 为 .pic 的子元素

#nav .text 选择 id 为 nav 的元素下面 class 为 .text的子元素

逗号的意思是“和”，可以把多个有相同属性的东西写到一起：

#a{height: 30px}

#b{height: 30px}

.c{height: 30px}

#a span{height: 30px}

上面几句可用逗号合并为：#a , #b , .c , #a span{height: 30px}

<div class="a_style b_style"></div>

<style>

.a_style{width:111px}

.b_style{float:left}

</style>

能看懂么？这个就是组合的，然后中间是以空格隔开。