<!-- <html>
<head>
<title>标签选择器</title>
<meta charset="utf-8" />
<style type="text/css">
*{margin:0;padding:0}
div{color:red}
</style>
</head>
<body>
<div>哈哈</div> 对应以上两条样式
<div class="box">哈哈哈</div> 对应以上两条样式
</body>
</html>
-->
<!-- <html>
<head>
<title>id选择器</title>
<meta charset="utf-8" />
<style type="text/css">
#box{color:red}
</style>
</head>
<body>
<div id="box">哈哈哈</div> 对应以上一条样式，其它元素不允许应用此样式
</body>
</html> -->
<!-- <html>
<head>
<title>类选择器</title>
<meta charset="utf-8" />
<style type="text/css">
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
</style>
</head>
<body>
<div class="red">哈哈</div>
<h1 class="red big mt10">哈哈哈</h1>
<p class="red mt10">哈哈哈哈</p>
</body>
</html> -->
<!-- <html>
<head>
<title>层级选择器</title>
<meta charset="utf-8" />
<style type="text/css">
.box span{color:red}
.box .red{color:pink}
.red{color:red}
</style>
</head>
<body>
<div class="box">
<span>哈哈</span>
<a href="#" class="red">哈哈哈</a>
</div>
<h3 class="red">哈哈哈哈</h3>
</body>
</html> -->
<!-- <html>
<head>
<title>组选择器</title>
<meta charset="utf-8" />
<style type="text/css">
.box1,.box2,.box3{}
.box1{background:red}
.box2{background:pink}
.box3{background:gold}
</style>
</head>
<body>
<div class="box1">哈哈</div>
<div class="box2">哈哈哈</div>
<div class="box3">哈哈哈哈</div>
</body>
</html> -->
<html>
<head>
<title>伪类及伪元素选择器</title>
<meta charset="utf-8" />
<style type="text/css">
.box1:hover{color:yellow}
.box2:before{color: red; content:'行首文字';}
.box3:after{content:'行尾文字'; color: blue}
</style>
</head>
<body>
<div class="box1">哈哈</div>
<div class="box2">哈哈哈</div>
<div class="box3">哈哈哈哈</div>
</body>
</html>
网友评论