css选择器测试2-用ul和li简单排版

2021年09月15日 阅读数:3
这篇文章主要向大家介绍css选择器测试2-用ul和li简单排版,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

以前的博文:
测试了一些css样式的优先级,都是比较常见的选择器 ,这里测试一些其余一些选择方式。css

*:通配符,全部页面的元素都走这个。
设置多个class:一个标签里不能有两个class,若是想要设置多个,可放入一个class里,用空格链接,格式是:
class="class1的名字 class2的名字",二者之间用空格链接。
且关系(两个class同时存在的元素):两个类之间不加空格,格式:.类名1.类名2{}
包含关系(一个里包含另外一个):用空格链接,格式:.类名1 .类名2{}(之间有空格)
标签[属性=属性值]某个属性值等于某个值的元素。测试

测试代码:spa

<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>

图示:code