样式表层叠13

最新推荐文章于 2024-07-18 15:09:36 发布

D0MINIC123

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量54

点赞数

分类专栏：前端学习文章标签： html5

本文链接：https://blog.csdn.net/D0MINIC123/article/details/114903895

版权

前端学习专栏收录该内容

14 篇文章 1 订阅

订阅专栏

2021/3/16
作用于同一个元素上的多个样式产生冲突的情况优先级高的样式会生效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式表的层叠</title>
    <style>
        #navigation {
            text-align: center;
        }

        .nav {
            text-decoration: none;
            color: black;
            border-right: solid 1px purple;
            padding: 1px 15px;

        }

        /* 作用于同一个元素上的多个样式产生冲突的情况 优先级高的样式会生效 */
        #navigation .last {
            border: none;
        }
    </style>
</head>

<body>
    <div id="navigation">
        <a href="#" class="nav">首页</a>
        <a href="#" class="nav">办公家居</a>
        <a href="#" class="nav">数码科技</a>
        <a href="#" class="nav">母婴</a>
        <a href="#" class="nav">团购</a>
        <a href="#" class="nav last">秒杀活动</a>
    </div>
</body>

</html>

效果图
在这里插入图片描述

D0MINIC123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
样式表层叠13

2021/3/16作用于同一个元素上的多个样式产生冲突的情况优先级高的样式会生效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录