<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 通配符选择器 所有的 */
*{
/* margin 外边距 */
/* padding 内边距 */
margin: 0;
padding: 0;
}
/* 标签选择器 */
div{
color: blue;
}
/* id选择器 */
#unique{
color: yellowgreen;
}
/* 类选择器 */
.second{
color: red;
}
.third{
/* background: darkgrey; */
color: yellow;
}
/* 群组选择器，提出公共代码，减少代码量 */
div,h1,p{
background-color: bisque;
color: red;
}
/* 后代选择器 匹配顺序先找出 p 再找div 从里向外进行匹配 */
div p{
background-color: red;
color: brown;
}
#unique p{
background-color: red;
}
/* 伪类选择器 严格遵守顺序 */
a:link{
color: yellow;
}
a:visited{
color: red;
}
a:hover{
color: green;
}
a:active{
color: blue;
}
</style>
</head>
<body>
<div id="unique">
<p>1234</p>
</div>
<!-- 如果有重复的属性 按照就近原则匹配 就近原则的对象是style标签中顺序，而不是属性中class 的书写顺序 -->
<div class="third second">2222</div>
<div>
<p>22222</p>
</div>
<h1>33333</h1>
<p>44444</p>
<a href="https://www.baidu.com">baidu</a>
</body>
</html>
版权声明：本文为weixin_43229819原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。