之前的博文:
测试了一些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>
<div id="divall">
<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>
</div>