css层叠性,继承性,优先级

前言

本文概要:讲述css的三大特性,层叠,继承和优先级。

层叠性

描述:我们试想以下这种情况:我们定义了同一个选择器,但是定义的属性不同。属性有相同的也有不同的,那么最后我们这个页面会听谁的。层叠性就是针对这种情况。

层叠性原则:所有相同选择器的属性合起来,相同的属性后定义的覆盖前定义的。

案例演示:

css 复制代码
    <style>
        div {
            background-color: blue;
            color: aqua;
        }

        div {
            background-color: darkmagenta;
        }
    </style>
</head>

<body>
    <div>猜猜谁管事?</div>
</body>

</html>

结果如下:

总结一句话:不冲突一起上,冲突了后来居上。

继承性

描述:这种特性是针对文字,颜色的样式。总结就是:父标签的文字及颜色行高样式,如果子标签没有额外定义,那么就会直接用父标签文字的样式进行显示。

继承属性:text,line,color这类跟文字有关的标签。

案例演示:(body标签是一切内容标签的父标签,我们给body标签设置文字属性看看)

css 复制代码
    <title>Document</title>
    <style>
        body {
            color: bisque;
            font: 700 20px/1.5 "微软雅黑";
        }
    </style>
</head>

<body>
    <div>猜猜谁管事?</div>
</body>

</html>

结果如下:

可以看到给body设置的文字属性直接就被子标签div给继承了。

上面的1.5是行高,可以写20px这类的固定行高,上面这个写法是文字的型号的1.5倍。后面给子标签设置文字大小的话行高会跟着子标签变化。

优先级

优先级:

越往下优先级越高。

描述:在相同优先级的情况下我们有层叠性,但是这种不同的选择器我们会根据他的优先级进行判定。

复合选择器的优先级:

复合选择器是一种加法

比如div p是两个元素选择器,他们都是0,0,0,1,相加就是0,0,0,2

看上面权重是四个数,我们复合选择器会相加

这里假设两个数:1,2,6,4和2,6,8,2

他们依次从左往右比较,相同比较下一位,得到大的一个。

上面两个2,6,8,2最右侧大,则听他的。

相关推荐
小白变怪兽1 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头1 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机4 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘5 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。5 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome