CSS优先级

写在前面

  • 今天宿舍停电了,但是停电并不能阻止我们学习的热情,我们纷纷涌入了咖啡馆学习(此处省略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">这里是Abstractp>
     <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;">这里是Abstractp>
     <p>这里是普通的p>
section>
//css部分
#content p {
    color: red
}

.abstract {
    color: black !important;
}

p的color属性是?
答案为:black

写在后面

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

你可能感兴趣的:(css)