CSS优先级

来源：互联网发布：天蝎网络第三季编辑：程序博客网时间：2024/06/05 17:10

写在前面

今天宿舍停电了，但是停电并不能阻止我们学习的热情，我们纷纷涌入了咖啡馆学习（此处省略1万字）
今天我要说的是关于css优先级的问题。下面让我们慢慢道来。

从最初的开始

外部链接
写在style标签里
内联属性

以上三种方式引入的css，优先级依次提高。也就是“内联属性”里的会覆盖上面两种，“写在style标签里”的会覆盖写在外部文件里，用“外部链接”引进来的。

//这是写在外部文件里的h1 {     color: #ffffff;}//这是写在html里的<head>    <link rel="stylesheet" href="styles.css" />    <style>        h1 {             color: #444245;        }    </style></head><body>    <h1 style="color:#123456">我的颜色到底是啥？</h1></body>

答案是：#123456

那么问题来了？？

如果在同一级中那应该怎么办？？
如果在同一个级别里，几乎只有一个规则，后写的覆盖先写的。所谓后写的会覆盖先写的表现在文件上就是代码行号更靠下的

//这是写在外部文件style.css里的h1 {     color: #ffffff;}h1 {     color: #dddadd;}//这是写在html里的<head>     <link rel="stylesheet" href="styles.css" /></head><body>    <h1>我的颜色到底是啥？</h1></body>

答案是：#dddadd

问题又来了？？

当选择器不一样的时候又应该怎么办？
本博客的重点来了！！

引入一个css权重的概念。在css中我们给每一种选择器设置一个权重值。计算命中一个元素的所有权重值之和，值大的优先。
元素选择器： 1
类选择器：10
ID选择器：100
内联选择器：1000

比如 #nav .current a {}
该权重为：100 + 10 + 1 = 111

//html部分<section id="content">     <p class="abstract">这里是Abstract</p>     <p>这里是普通的</p></section>//css部分#content p {    color: red}.abstract {    color: black;}

p的color属性是什么颜色？？
答案为：red

然而，并没有结束

在一些情况下，我们也可以强制优先级
使用important

p {    color: white !important;}

练习

//html部分<section id="content">     <p class="abstract" style="color: blue;">这里是Abstract</p>     <p>这里是普通的</p></section>

//css部分#content p {    color: red}.abstract {    color: black !important;}

p的color属性是？
答案为：black

写在后面

今天学校停电真不好阿，学校总是阻止我们学习（不要脸）。
周四和我们组员和老师一起交流了很多，感觉基础还是很重要很重要的。或者是现在的我们还没有理解把。但希望自己快快觉醒。前进～～～
关于我写的内容，欢迎大家吐槽，沙发，扔香蕉皮，提各种问题。不管是内容上还是排版上，欢迎大家吐槽。

0 0