前端笔记(一):CSS的覆盖
来源:互联网 发布:王励勤多娜 知乎 编辑:程序博客网 时间:2024/05/16 15:51
在页面中,我们常用id、class以及内联样式表来设置我们的组件CSS。
有时候我们为了编码的简便会使用CSS库,这些库会设置好全局的CSS,但是有某几个组件我们不想使用CSS库中定义的样式而想用别的特别的样式怎么办呢?
解决方法就是:使用自定的CSS样式覆盖之前的CSS样式
CSS中的优先级大体是:内联样式>id引用>class引用
举个例子,比如下面这个style:
< style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {
color: orange;
}
.class1 {
color: pink ;
}
.class2 {
color: blue;
}
< /style>
我们来创建一个段落加上点文本看看字体颜色会发生什么变化
<p>Hello World!</p>
,首先不指定id和class,字体默认为body中的样式,为green
class需要特别讲一下:
比如这段代码<p class="class1 class2" >Hello World!</p>
这段文本会同时继承class1、class2中的样式,但是当这两个类中有相同的变量时,class间有冲突时,优先使用后者的定义,所以此时文本字体为blue。
<p class="class1 class2" id="orange-text">Hello World!</p>
此时id覆盖class,文本字体为orange。
<p class="class1 class2" id="orange-text" style="color:whitle">Hello World!</p>
此时内联样式表覆盖id和class,文本字体为white。
补充一点:如果你想某个样式的某个变量不被覆盖的话,可以在其后面加上!important来强制增加其的优先级,但是只能加在id、class中。比如在#orange-text中的color后面加上!important:
#orange-text
{
color: orange !important ;
}<p class="class1 class2" id="orange-text" style="color:whitle">Hello World!</p>
这样的话就算有内联样式表设置color为white,color仍然为orange。
- 前端笔记(一):CSS的覆盖
- 前端-CSS基础知识(一)
- 前端笔记(一)
- 前端笔记(一)
- 优秀的Web前端CSS框架Bootstrap(一):简介
- 前端学习笔记--css基础的基础
- CSS 笔记(一)
- css 笔记(一)
- CSS的学习笔记---(一)
- CSS的一些学习笔记(一)
- 小白的css笔记(一)
- 前端开发笔记(一)
- 前端学习笔记(一)
- 前端实践笔记(一)
- 前端CSS技术全解(一)
- 前端必备----CSS知识总结(一)
- 前端学习(一)CSS基础
- 【前端新手】css知识点随记(一)
- Web方式管理后台进程:Supervisor
- android 基础小知识点
- java5
- [bzoj-3155]Preprefix sum 题解
- C++ STL的常见用法
- 前端笔记(一):CSS的覆盖
- #java#将一个数插入已经排序的数组
- 为什么100以内的数猜七次
- 数字货币与区块链关键技术(新浪分享PPT全文)
- HTML框架
- 三子棋-C语言
- js中的this
- 【机器学习理论】分类问题中常用的性能评估指标
- LintCode_003_统计数字