前端面试 CSS三大特性

CSS的三大特性

1.层叠性

　　代码由上向下执行，相同选择器设置到同一元素上，样式冲突的，会执行比较靠近html的样式，样式不冲突的情况下不影响

　　代码如下

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box {
                margin: 0 auto;
                height: 200px;
                width: 200px;
                background-color: black;
            }
            .box1 {
                background-color: red;
                width: 100px;
                height: 100px;
                }
            .box1 {
                background-color: pink;
                }
        </style>
        <div id="box">
            <div class="box1">11</div>
        </div>
        
    </body>
</html>
复制代码

2.继承性

　　CSS具有继承父类元素的特性，如 字体大小，颜色

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box {
                margin: 0 auto;
                height: 200px;
                font-size: 30px;
            }
            .box1 {
                
                width: 100px;
                height: 100px;
                }
        </style>
        <div id="box">
            <div class="box1">继承性</div>
        </div>
        
    </body>
</html>
复制代码

3.优先级

  • 继承样式的权重为0 ， 
  • 行内样式，style属性的元素，行内样式权限非常高
  • !important命令，拥有最大的优先级

Div  ul  li

0,0,0,3

.nav  ul  li

0,0,1,2

a:hover

0,0,1,1 (伪类)

.nav  a

0,0,1,1

#nav  p

0,1,0,1
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box {
                margin: 0 auto;
                height: 200px;
                font-size: 30px;
                color: #ffbbff !important;
            }
            .box1 {
                width: 100px;
                height: 100px;
                color: red;
                }
        </style>
        <div id="box">
            <div class="box1">优先级</div>
        </div>
        
    </body>
</html>
复制代码

 

posted @   一杯咖啡钱  阅读(53)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae