<style>
div{
/*盒子模型*/
width: 100px; /* pixel */
height: 100px;
background-color: red;
padding: 20px;
border: 20px solid blue;
margin: 20px;
/* outline:10px solid blueviolet; */
/* border-radius: 50%; *//*圆角*/
box-shadow:10px 10px 10px burlywood;
/* opacity: 0.5; */
/*内容修饰*/
color: yellow;
text-align: center;
line-height: 100px; /*行间高度*/
text-decoration: line-through;/*中划线*/
font-size: 32px;
font-weight: 700; /*字号*/
text-shadow: 10px 10px 1px teal;
/*box breaker*/
transform: translate(30px,30px); /*位移*/
transform: scale(1.2,1.2);/*缩放*/
transform: rotate(90deg);/*旋转*/
transform: skew(0deg , 0deg);/*横纵向拉伸*/
/* 动画 */
/* 过渡 */
transition: 2.0s;
/* 关键帧动画 */
}
/*伪类*/
div:hover{
/*鼠标悬停*/
width: 200px;
height: 200px;
}
div:active{
background-color: teal;
}
/*伪标签*/
div::after{
content: '$';
color: chocolate;
}
div::before{
content: '价格：';
color: black;
}
</style>
以上为对盒子的修改部分
关于鼠标动作触发的优先级有以下猜测：
优先级当前存在且最后发生且保留为最优先，其次为当前局部保留动作（如同时设置悬停触发的触发时间为一秒，点击触发变色的触发时间为一瞬间；
在点击的瞬间，会优先点击并瞬间变色，但是松开鼠标后会按照悬停的标准缓慢变回原来的色样）
使用伪标签可以使浮动造成的坍缩影响变小且不会有多余的与内容无关的代码
inline标签的宽高只由内容决定，只有块标签才有宽和高的设置
