<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.24</title>
<style type="text/css">
p::after{
content: "hahaha";
color: red;
}
p::before{
content: "hehehe";
color: coral;
}
p::selection{
color: aqua;
}
p::first-letter{
font-size: 65px;
color: blueviolet;
}
/* 综合运用类选择器？*/
*{
margin:0;
padding:0;
}
ul{
/*border:1px solid red;*/
width:2000px;
}
li{
border:1px solid blue;
height:300px;
text-align: center;
background-image:url("CSDN图片素材/3.webp");
width:200px;
}
h3{padding-left:50px;}
li{display:inline-block;}
/* li p{color:red;}*/
ul li{margin-left:10px;}
nav{width:300px;height:100px;margin:40px auto;border:1px dashed pink;}
h3::before{
/* content:url("CSDN图片素材/3.webp"); 正确格式*/ content可添加的内容
content:'';
background:url("CSDN图片素材/3.webp") no-repeat center;
background-size:20px 20px;
display:no-repeat;
display:inline-block;
width:100px; /*添加图片时需要设置高度*/
height:50px;
}
li:hover{color:blue;} /*a 行内元素 设宽高无效 */
a:hover{cursor:pointer;}
a{
display:inline-block;
}
</style> <!-- 若想使a标记变宽display:inline-block;即可铺满li -->
</head>
<body>
伪类:<br>
为元素::
<hr color="blue" >
<p class=".p1::first-letter">6
当鼠标经过悬停与设置title属性的div盒子上时，鼠标旁边提示显示title设置的内容信息。此使用方法与html a超链接设置title属性相同。
六、div属性总结 - TOP
以上基础与实例介绍对div标签内设置常用属性，同时其它标签也可以设置以上五点属性，原理语法结构均相同，大家可以根据DIVCSS5教程举一反三使用。
</p>
<p class=".p2::first-letter">
//本篇文章都使用这个结构代码来做演示
//lorem加上Tab键快速生成一段测试英文
</p> <!-- ul>li*5+tab -->
<ul>
<nav><h3>美图赏析</h3></nav>
<li><a href="">html10时45分</a></li>
<li>下课了</li>
<li>还有10分钟上课</li>
<li>12345</li>
<li>6789</li>
</ul>
</body>
</html>效果图