css级联与继承

金文翔
• 阅读 4050

级联

级联(The cascade),CSS是Cascading Style Sheet 的简写,说明级联是非常重要的。从表层来看,级联表明CSS规则的顺序问题,但是级联远比这个复杂,在所有的选择器中某个选择器定义的规则是否能够胜出(即优先级)取决于三个元素:Importance,Specificity,Source order
①.!important声明(Importance)

在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议不使用"!important",因为它会改变级联的工作方式,使得调试变得困难。

例如:

`<style>
    #winning {background-color: red; border: 1px solid black;}
    .better {     background-color: gray; border: none !important;}
</style>
<p class="better">This is a paragraph.</p>        
<p class="better" id="winning">One selector to rule them all!</p>`

②.特性值 (Specificity)
通过4个特性值来量化一个选择器

  • Thousands

声明在元素的style属性中。特性值记为1000

  • Hundreds

包含在一个选择器中的所有ID选择器

  • Tens

包含在一个选择器中的所有类选择器,属性选择器,伪类选择器

  • Ones

包含在一个选择器中的所有元素选择器,伪元素选择器
③.代码顺序 (Source order)

如果多个竞争选择器具有相同的重要性和特性值,代码顺序就发挥作用了,后来规则优先前面规则。 

继承(Inheritance)

CSS中有些规则将会默认被子元素继承,有些则不会。比如font系列属性,文本系列属性、列表系列属性,cursor
CSS提供了三个特殊的值用来处理继承
1) inherit 继承父元素的样式
2) initial 不继承。应用浏览器的默认样式
3) unset 不设定,表现该规则本来特性,即如果该规则具有继承属性则继承,否则不继承。

点赞
收藏
评论区
推荐文章
红烧土豆泥 红烧土豆泥
3年前
MyBatis之ResultMap玩法回顾
1、SelectResultMap自定义结果集映射规则xmlselectfromemployeewhereidid关联查询级联属性封装结果xmlselectfromemployeee,departmentdwheree.idd.id关联查询associatio
Jacquelyn38 Jacquelyn38
4年前
手把手教你实现一个Vue无限级联树形表格(增删改)
前言平时我们可能在做项目时,会遇到一个业务逻辑。实现一个无限级联树形表格,什么叫做无限级联树形表格呢?就是下图所展示的内容,有一个祖元素,然后下面可能有很多子孙元素,你可以实现添加、编辑、删除这样几个功能。资源JavaScript框架:vue.jsUI框架:ElementUI源码这里需要重点说明的是,主要使用了递归的算法以及给数
Wesley13 Wesley13
3年前
JS省城级联
 这里是HTML内容<labelclass"controllabelcolmd2colsm3colxs12"购车城市<spanclass"required"</span</label<divclass"colmd2colsm3colxs12"
Wesley13 Wesley13
3年前
CSS基本语法及页面引用
css基本语法及页面引用(1)css基本语法css的定义方法是:选择器{属性:值;属性:值;属性:值;}选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:/css注释ctrlshift"/"/d
Stella981 Stella981
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
3年前
CSS基础知识整理
1什么是CSS?CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
Wesley13 Wesley13
3年前
020_CSS3
目录如何学习CSS什么是CSS发展史快速入门css的优势三种CSS导入方式拓展:外部样式两种写法选择器基本选择器层次选择器结构伪类选择器属性选择器美化网页元素为什么要
Easter79 Easter79
3年前
Spring之级联属性
新建XML文件<?xmlversion"1.0"encoding"UTF8"?<beansxmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchemainsta
Stella981 Stella981
3年前
Seleinum_CSS定位方式
转载:https://www.cnblogs.com/longronglang/p/9144661.htmlCSS选择器:常见符号:表示id选择器.表示class选择器\表示子元素,层级一个空格也表示子元素,但是是所有的后代子元素,相当于xpath中的相对路径一、css:属性定
Stella981 Stella981
3年前
CSS前端经典面试题及解析——小白入门必备
1.CSS选择器的优先级是如何计算的?浏览器通过优先级规则,判断元素展示哪些样式。优先级通过4个维度指标确定,我们假定以a、b、c、d命名,分别代表以下含义:1.a表示是否使用内联样式(inlinestyle)。如果使用,a为1,否则为0。2.b表示ID选择器的数量。3.c表示类选择器、属性
非内积级联学习
1.首页推荐非内积召回现状非内积召回源是目前首页推荐最重要的召回源之一。同时非内积相比于向量化召回最终仅将user和item匹配程度表征为embeding内积,非内积召回仅保留itemembedding,不构造user显式表征,而是通过一个打分网络计算用户