zoukankan      html  css  js  c++  java
  • CSS样式优先级和权重问题(部分)

    内联样式: <div style="font-size: 12px;">姓名</div>


    外部样式: <link rel="stylesheet" href="css/bootstrap.min.css" />


    内嵌样式 : <style>
                               .name{
                                   font-size: 12px;;
                               }
                      </style>


    jquery书写样式:$('#name').css('font-size','12px');


    id选择器: <div id="name">姓名</div>


    class选择器:<div class="name">姓名</div>


    一般情况下,优先级问题:

    jquery书写样式 > 内联样式 > 外部样式;

    id选择器 > class选择器 ; id一般作为数据传输,样式的话尽量使用class;

    在html页面中,程序是自上至下执行的,执行晚的优先级高,如果外部样式先执行,内嵌样式后执行,则内嵌样式 > 外部样式

    权重问题:

    元素,伪元素:                                            +1                          p{font-size:12px;} 直接写p标签的样式

    类,伪类,属性:                                         +10                        class选择器

    ID:                                                            +100                      id选择器

    内联样式:                                                   +1000                    内联样式

    用代码(js,jquery)书写的样式:                 +较高                    $('#name').css('font-size','12px');

    !important :                                            +最高                     p{font-size: 20px !important;};  

    例如以下样式:

    p {}                        p为元素                                           总权重就是:1

    div p{}                   p与div都是元素                                 总权重是:1=1=2

    .div p{}                  .div是类,p是元素                             总权重是:10+1=11

    .div .class_p{}         .div是类 .class_p是p元素的class          总权重是:10+10=20

    先写这么多!

    !important :    这个较为特殊,只要写在样式后边  font-size: 20px !important;   那这个样式的权重最高。

    感谢yy_68的指正~

  • 相关阅读:
    Hibernate save, saveOrUpdate, persist, merge, update 区别
    Eclipse下maven使用嵌入式(Embedded)Neo4j创建Hello World项目
    Neo4j批量插入(Batch Insertion)
    嵌入式(Embedded)Neo4j数据库访问方法
    Neo4j 查询已经创建的索引与约束
    Neo4j 两种索引Legacy Index与Schema Index区别
    spring data jpa hibernate jpa 三者之间的关系
    maven web project打包为war包,目录结构的变化
    创建一个maven web project
    Linux下部署solrCloud
  • 原文地址:https://www.cnblogs.com/pengxiangchong/p/8315793.html
Copyright © 2011-2022 走看看