<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素和伪类选择器</title>
<style type="text/css">
p:after{
font-size:16px;
font-family:"宋体";
background-color:red;
color:black;
content:"me too!";
}
p:before{
font-size:16px;
font-family:"宋体";
background-color:red;
color:black;
content:"今天天气不错!";
}
p:first-line{
font-size:20px;
font-family:"宋体";
font-weight:bold;
background-color:green;
color:black;
}
p:first-letter{
font-size:20px;
font-family:"宋体";
font-weight:bold;
background-color:blue;
color:black;
}
.one{
color:green;
font-size:20px;
}
a.one:link{
color:red;
}
a.one:visited{
color:blue;
}
a.one:hover{
color:yellow;
}
a.one:active{
color:black;
}
</style>
<!-- 作用于所有的的p元素 -->
</head>
<body>
<a class="one" href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>
<p>"I love you" 我是真的非常喜欢你<br/></p>
<p> 我是真的非常喜欢你<br/>
我是真的非常喜欢你<br/>
我是真的非常喜欢你<br/>
我是真的非常喜欢你<br/>
</p>
</body>
</html>
伪元素和伪类选择器
最新推荐文章于 2024-04-17 10:43:16 发布