您的位置：首页 > Web前端 > HTML5

HTML5学习_day02(1)--css高级选择器

2016-09-21 19:07 344 查看

</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test1{
width: 100px;
height: 50px;
background-color: blanchedalmond;
}
.test2{
width: 100px;
height: 50px;
background-color: dodgerblue;

}
p{
width: 6em;
background: darkorange;
}
#id1,.class1{
width: 50px;
height: 25px;
background-color: darkcyan;

}
.class2,.class3,#id2,#id3,p{
background: darkturquoise;
}

*{
font-style: italic;
}

</style>
</head>
<body>
<!--1.id选择器
语法：#id名称{样式1;样式2;}
书写的位置:head标签中的style标签里面-->
<div id="test1"></div>

<!--2.类(class)选择器
语法：.类名{样式1;样式2;}
书写的位置:head标签中的style标签里面-->
<div class="test2"></div>

<!--3.标签选择器
语法：标签名{样式1;样式2;}
书写的位置:head标签中的style标签里面-->
<p>123123</p>

<!--优先级
内嵌样式>id选择器>class选择器>标签选择器-->

<!--4.群组选择器
语法：selector1,selector2,....{样式1;样式2;}
selector1,selector2,..指的是标签选择器或者id选择器或者class选择器
-->
<div class="class1">class1</div>
<div id="id1">id1</div>

<div class="class2">class2</div>
<div class="class3">class3</div>
<div id="id2">id2</div>
<p id="id3">id3</p>
<p>p标签</p>

<!--5.通配符选择器
语法：*{样式1;样式2;}
*表示所有意思 适用所有的html标签
-->

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航