• CSS优先级


    一、引入CSS样式的方法

      在HTML文件中引入CSS样式有三种方法:

    • 外部样式:通过link标签引入CSS样式
    • 内页样式:写在HTML页面里面的style标签里面
    • 行内样式:写在对应标签的style属性里面

      我知道一般情况下使用外部样式,减少代码冗余,同时便于后期维护。

      外部样式:

      css/common.css  

    .c1{
        background-color: #960606;
        color: white;
    }
    
    .c2{
        font-size: 50px;
        color: black;
    }
    

      引入外部css样式: 

    <head>
        <meta charset="UTF-8">
        <title>css优先级</title>
        <link type="text/css" rel="stylesheet" href="css/common.css"/>
    </head>
    <body>
        <div class="c1">好好学习,天天向上</div>
    </body>
    

      如下:

      

    二、CSS样式优先级

      2.1 从CSS代码存放位置看权重优先级

        内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表。

    .c1{
        background-color: red;
        font-size: 30px;
        color: white;
    }
    
    .c2{
        font-size: 50px;
        color: black;
    }
    common.css
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css优先级</title>
        <link type="text/css" rel="stylesheet" href="css/common.css"/>
        <style>
            .c1{
                font-size: 100px;
                color: green;
            }
            div {
                font-size: 40px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div class="c1" style="background: blue; color: yellow">好好学习,天天向上</div>
    </body>
    </html>
    对比优先级

      

       2.2从样式选择器看权重优先级

        important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

    相当于: 

    1. 第一等:代表内联样式,如: style=””,权值为1000
    2. 第二等:代表ID选择器,如:#content,权值为100
    3. 第三等:代表类,伪类属性选择器,如.content,权值为10
    4. 第四等:代表类型选择器伪元素选择器,如div p,权值为1。 
    .c1{
        background-color: red;
        font-size: 30px;
        color: white;
    }
    
    .c2{
        font-size: 50px;
        color: black;
    }
    common.css
    <head>
        <meta charset="UTF-8">
        <title>css优先级</title>
        <link type="text/css" rel="stylesheet" href="css/common.css"/>
        <style>
            #c1{
                font-size: 60px;
                color: black;
            }
            .c1{
                font-size: 100px;
                color: green;
            }
            div {
                font-size: 40px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div class="c1" id="c1" style="background: blue; color: yellow">好好学习,天天向上</div>
    </body>
    对比优先级

      2.3 同级选择器,后者覆盖前者

      和样式选择器编写顺序有关,越往下优先级越高 

    .c1{
        background-color: red;
        font-size: 30px;
        color: white;
    }
    
    .c2{
        font-size: 50px;
        color: black;
    }
    <body>
        <div class="c1 c2">好好学习,天天向上</div>
    </body>
    

      如下:

      

      

  • 相关阅读:
    系统调用与库函数
    在树莓派上 搭建sqlite数据库
    (转)inux Read系统调用
    查看当前日期是这一年的第几天
    求解某个范围内的全部完数
    求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字。
    输入三个整数x,y,z,请把这三个数据由大到小输出。
    模仿ArrayList底层实现
    可视化日历
    Oracle之约束条件1:主键约束
  • 原文地址:https://www.cnblogs.com/bigberg/p/8430222.html
Copyright © 2020-2023  润新知