HTML5 css链接添加不同的样式

最新推荐文章于 2023-07-04 19:14:52 发布

飘飘花吹雪

最新推荐文章于 2023-07-04 19:14:52 发布

阅读量3.4k

点赞数 4

分类专栏： HTML5 文章标签： html5 css 链接 class 样式

本文链接：https://blog.csdn.net/li6727975/article/details/43973387

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

可以用css的选择器来为不同链接添加不同的样式，但经过测试，不知道为什么用id选择器并未成功，经过测试发现用class选择器是可行的，相关案例如下：

本案例是为了实现链接的文本跳转（由页面底部调到首部）和为不同链接添加不同样式，其中，底端链接单独添加了样式，代码如下：

HTML5代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试css链接属性</title>
    <link rel="stylesheet" type="text/css"  href="../css/linking.css" >
</head>
<body>
    <a href="http://www.baidu.com" target="_blank" id="top">文本链接</a><br/>
    <a href="http://www.jikexueyuan.com" target="_blank">
        <img src="../img/2014-09-08-641.jpg" width="128px" height="72" alt="this is a image">
    </a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="#top" class="end_line">返回顶端</a>
</body>
</html>

CSS样式代码：

a.end_line:link{
    color: #000000;
}
a.end_line:visited{
    color: aqua;
}
a.end_line:hover{
    color: #e6e83e;
}

利用a.XXXX:link{}的方法就实现了对链接的单独样式设定。希望对你们有帮助

飘飘花吹雪

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 css链接添加不同的样式

可以用css的选择器来为不同链接添加不同的样式，但经过测试，不知道为什么用id选择器并未成功，经过测试发现用class选择器是可行的，相关案例如下：本案例是为了实现链接的文本跳转（由页面底部调到首部）和为不同链接添加不同样式，其中，底端链接单独添加了样式，代码如下：HTML5代码：测试css链接属性文本链接
复制链接

扫一扫