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>

图示：