css之文本属性与字体属性示例

<!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；

css之文本属性与字体属性示例

猜你喜欢