<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本属性和字体属性示例</title>
<style type="text/css">
a{
text-decoration:none;
color:#333;
font-size:14px;
}
a:hover{
color:#FD8308;
text-decoration: underline;
}
.box p span{
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box">
<a href="https://item.taobao.com/item.htm?id=5764459
49507&ali_refid=a3_430673_1006:1104117719:N:emtiAWsF
8%2Bzhhxaiwzc0Aw%3D%3D:98313bbba5ab67b9d505833b740031
22&ali_trackid=1_98313bbba
5ab67b9d505833b74003122&spm=a2e15.8261149.07626516002.22">
加大码工装连体套装女装无袖连体裤2020年夏季连衣裤春季连身长裤
</a>
<p>¥<span>138</span></p>
</div>
</body>
</html>
渲染效果:
鼠标悬浮时超链接变色且出现下划线,价格上有line-through;
选择器
- 标签选择器:权重为1;
p{
color:#333
}
- 类选择器:权重10;
.tit{
color:darkslategray;
}
- id选择器:权重100;
#qjj{
color:lightseagreen;
}
-
内联选择器:权重1000;
-
!important加在属性后可以使该属性权重最高。
-
伪类选择器:
/*没有被访问过的a的状态*/
a:link{
color:darkorange;
}
/*访问过后的a的状态*/
a:visited{
color:green;
}
/*鼠标悬浮时a的状态*/
a:hover{
color:black;
}
/*鼠标按住a时的状态*/
a:active{
color:purple;
}
- 高级选择器的权重是 其中基础选择器权重的叠加
- 继承来的属性权重几乎为0;