CSS 权重优先级

前言

偶尔写CSS时会发现改了颜色、宽高但没有任何效果,就有可能是优先级搞出的问题唷。
所以搞清楚CSS是如何套用按权重套用样式也是很重要的~

主要三种元素套用CSS的方式

inline 行内样式

把CSS写在元素内,Like:

<div style="background-color: pink;">
    行内样式
</div>

元素插入 style ="" 就可以对元素设定CSS,权重也是三者里最高的~

页面样式

通常撰写於header内,Like:

<head>
     <style>
         nav {
             width:100px;
             height:100px;
             background-color:pink;
         }
     <style>
</head>

在这里可以设定此页面元素的CSS,权重视三者里的中间位。

外部载入

使用外部的CSS样式档案,Like:

<link rel="stylesheet" href="css/style.css">

权重输以上两者。
若两个外部载入的档案都有设定同一个元素的属性,则会套用排序最後的外部CSS档案。

选择器权重

ID > CLASS > 元素


<<:  大家好~

>>:  Day3-认识 SVG

Day 21:开始来学资料系结:文字插值

在连续开了几天支线任务之後,我们将再次回到 Angular 开发的正轨,继续我们第十六天之後的网页开...

Day 25: 准备假的Coroutine,让外面世界不会影响我!

Keyword: Coroutine mock 直到27日,完成KMM的测试功能放在 KMMDay2...

[Day26] Vue 3 - Hello Vue

当我们的网页引入 Vue.js 的时候,会建立一个 Vue 的全域变数,并且提供各种功能等我们去使用...

树选手1号:decision tree

想要利用接下来的几篇文章把tree-based的模型稍微介绍一下,所有的tree-based模型基本...

Day 26 - 你有没有玩过LOL、特、CS、SF、枫之谷、APEX?

Game Intro 这个是我的游戏的最初设计图,其实算是蛮多游戏的总和。 CS、SF、特战英豪: ...