css选择器测试2-用ul和li简单排版
之前的博文：
测试了一些css样式的优先级，都是比较常见的选择器 ，这里测试一些其他一些选择方式。
*：通配符，所有页面的元素都走这个。
设置多个class:一个标签里不能有两个class，如果想要设置多个，可放入一个class里，用空格连接，格式是：
class="class1的名字 class2的名字",两者之间用空格连接。
且关系(两个class同时存在的元素)：两个类之间不加空格，格式：.类名1.类名2{}
包含关系（一个里包含另一个）：用空格连接，格式：.类名1 .类名2{}（之间有空格）
标签[属性=属性值]某个属性值等于某个值的元素。
测试代码：
<style> body{margin:0px;} ul{list-style-type:none;margin:0px;} li{float:left;display:block;width:100px;height:50px;background:gray;margin-left:10px;margin-top:10px;} p{margin:0px;} .clearFloat{clear:both;} *{font-size:20px;} #li1{font-size:30px;} .c2{font-size:10px;} .c22{color:white;} .c2.c22{background:blue;}/**两个class是且的关系，有两个类的元素才会加上这个样式**/ .c6{font-family:"楷体";} .pp{font-weight:bold;} .c6 .pp{background:yellow;}/**两个类直接空格，是包含关系，第一个类里的含有第二个类的**/ .c8{background:red;} input[type="button"]{border:0px;color:blue;} </style> </head> <body> <div id="divall"> <ul> <li id="li1">内容1</li><!--id选择器大于*通配选择器--> <li class="c2" class="c22">内容2</li><!--错误写法，一个标签里不能两个class--> <li class="c2 c22">内容3</li><!--多个类选择器，可用空格连接--> <li class="c22">内容4</li><!--只有一个类，背景色不会变蓝色--> <li class="clearFloat">内容5</li><!--走通配样式的文字大小--> <li class="c6"><p class="pp">内容6</p></li> <li><p class="pp">内容7<p></li><!--不是c6里包含的pp，所以背景色没变--> <li><input type="button" value="内容9"></li> </ul> </div>
图示：
