css样式优先级计算规则

css样式的优先级分为引入优先级声明优先级

引入优先级

引入样式一般分为外部样式,内部样式,内联样式。

外部样式:使用link引入的外部css文件。

内部样式:使用style标签书写的css样式。

内联样式:直接书写在html标签里面的css样式。

优先级如下:

内联样式 > 外部样式 = 内部样式

外部样式优先级和内部样式优先级相同,故写在后面的样式会覆盖前面的样式。

声明优先级

一般优先级如下:

  • !important > 内联 > ID > Class|属性|伪类 > 元素选择器
  • :link、:visited、:hover、:active 按照LVHA顺序定义

优先级算法:

等级

内联选择器

ID选择器

类选择器/属性选择器/伪类

元素选择器

示例

<span style="color:red;"></span>

#sp{color:red}

.sp{color:red}[type="text"]{color:red}:nth-of-type(1){color:red}

span{color:red}

优先级

1-0-0-0

0-1-0-0

0-0-1-0

0-0-0-1

注意:

**通配符 * 的优先级为 0-0-0-0,但是优先级大于继承样式优先级。++

优先级算法示例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a{color: yellow;} /*特殊性值:0,0,0,1*/
        div a{color: green;} /*特殊性值:0,0,0,2*/
        .demo a{color: black;} /*特殊性值:0,0,1,1*/
        .demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/
        .demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/
        #demo a{color: orange;} /*特殊性值:0,1,0,1*/
        div#demo a{color: red;} /*特殊性值:0,1,0,2*/
    </style>
</head>

<body>
    <a href="">第一条应该是黄色</a>
    <div class="demo">
        <input type="text" value="第二条应该是蓝色" />
        <a href="">第三条应该是黑色</a>
    </div>
    <div id="demo">
        <a href="">第四条应该是红色</a>
    </div>
</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小闫笔记

html和css进阶

5.0之前没有placeholder新增功能,之前是value(提示的文字需要用户删除,而且字的颜色也没有变暗)实现的

38240
来自专栏小闫笔记

web前端入门

8 = html + css +javascript(jQuery和vue就是js封装的函数而已)

12150
来自专栏前端达人

「小技巧」console的用法,不仅仅只有console.log()

在JavaScript开发调试中,console.log()是我们最常用的方法,但是还有其它几个常用的方法,值得我们试一试,也许会起到意想不到的效果。

10020
来自专栏算法与编程之美

Web|网页制作秘密武器之列表

列表(list)是指是指在网页中讲相关信息以及条目的方式有序或无序排列而形成的表。常用的列表有无序列表(ul),有序列表(ol)和定义列表(dl)等,接下来,我...

9620
来自专栏Android进阶之路

知乎Matisse源码解析,探究高效图片选择库的秘密

可以看到 Matisse 的可拓展性是非常强的,不仅可以自定义我们需要的主题,而且还可以按照需求来过滤出我们想要的文件,除此之外,Matisse 采用了建造者模...

15810
来自专栏Android补给站

5分钟吃透React Native Flexbox

今天我们来聊聊Flexbox,它是前端的一个布局方式。在React Native中是主流布局方式。如果你刚刚入门React Native,或者没有多少前端的技术...

10020
来自专栏xyjincan

tomcat 崩溃疑问笔记

版权声明:本文为博主原创文章,转载请保留出处 ...

14930
来自专栏算法与编程之美

前端|利用CSS制作动画效果

大家是否觉得上面这个图形需要用到的代码会很复杂?其实不然,我们利用简单的css即可达到此种效果。

14940
来自专栏小闫笔记

JavaScript高级

首先更正一个小问题,昨天的JavaScript入门一文中,末尾的“网页换肤”这个小案例的代码插入的有问题,插入的是名片案例的代码,排版不严谨向您致歉,现在补发更...

12230
来自专栏腾讯技术工程官方号的专栏

卡牌特效: svg不规则倒计时动效

? 导语:直播过程中,往往会有各种动画特效增强直播效果,近期需求中,设计要求在企鹅电竞PC官网上实现一种卡牌效果,在不规则图片上叠加倒计时效果。前端项目中,...

18030

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励