样式的优先级

最新推荐文章于 2023-02-23 07:00:00 发布

honeyws

最新推荐文章于 2023-02-23 07:00:00 发布

阅读量1.3k

点赞数 1

分类专栏： Web前端基础文章标签：样式的优先级

本文链接：https://blog.csdn.net/weixin_44802155/article/details/102947399

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

样式的优先级
相同样式优先级，内部样式和外部样式，单一样式优先级，！important，标签+类与单类，分组优先级和包含优先级几种情况分别讲解样式的优先级
相同样式优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相同样式的优先级</title>
    <style>
        .content{   color: cyan;}
        .content{   color: darkmagenta;}
    </style>
</head>
<body>
    <p class="content">这是一个段落</p>
</body>
</html>

当设置相同样式时，后面的样式优先级高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置啦相同样式，那么后写的引入方式优先级高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式与外部样式</title>
    <link rel="stylesheet"  type="text/css" href="style.css">
    <style>
        /*优先级高于style.css中的content样式*/
        .content{   color: darkmagenta;}
    </style>
</head>
<body>
    <p class="content">这是一个段落</p>
</body>
</html>

单一样式优先级
Style行间样式>id选择符>class选择符>tag选择符>默认继承
Tag选择符与默认继承优先级比较，tag选择符的优先级高于默认继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单一样式的优先级</title>
    <style>
        div{    color: blueviolet;}
        p{  color: cyan;}
    </style>
</head>
<body>
    <p class="content">这是一个段落</p>
</body>
</html>

Tag选择符大于默认选择符
Class选择符与tag选择符优先级比较，class选择符的优先级比tag选择符的优先级高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择符大于默认继承</title>
    <style>
        div{    color: cyan;}
        p{  color: chocolate;}
        .active{    color: chartreuse;}
    </style>
</head>
<body>
    <p class="active">这是一个段落</p>
</body>
</html>

Class选择符大于tag选择符
Id选择符与class选择符优先级比较。Id选择符的优先级比class选择符优先级高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式的优先级</title>
    <style>
    div{    color: blueviolet;}
    p{  color: blueviolet;}
    .active{    color: cadetblue;}
    #content{   color: chartreuse;}
    </style>
</head>
<body>
    <p id="content" class="active">这是一个段落</p>
</body>

honeyws

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
样式的优先级

样式的优先级相同样式优先级，内部样式和外部样式，单一样式优先级，！important，标签+类与单类，分组优先级和包含优先级几种情况分别讲解样式的优先级相同样式优先级<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>相同样式的优...
复制链接

扫一扫