• CSS常用的选择器和优先级的权重问题


    CSS注释

    CSS修改页面中的所有标签,必须借助选择器选中。
    选择器中,可以写多对CSS属性,用{}包裹;
    每个属性名与属性值之间用:分隔,多对属性之间,必须用;来分隔

    选择器{
     属性1:属性值1;
     属性2:属性值2;

    【选择器的命名规范】

    1、只能有字母、数字、下划线、减号组成。
    2、开头不能是数字,也不能是只有一个减号。
    一般,起名要求有语义,使用英文单词与数字的组合。



    1、标签选择器

    写法:HTML标签名{}
    作用:可以选中页面中,所有与选择器同名的HTML标签。

    例如:

    li{
      color:red;
      font-size: 48px;
    }

    2、类选择器(class选择器)

    写法:.class名{}
    调用:在需要调用选择器样式的标签上,使用class=“class名”调用选择器
    优先级:class选择器>标签选择器

    例如:

    .first{
      color: blue;
    }

    3、ID选择器

    写法:#ID名{}
    调用:需要调用样式的标签,起一个id=“ID名”
    优先级:ID选择器>class选择器
    注意:一个页面中,不能出现同名ID

    例如:
    #one{
      background-color: yellow;
    }

             【class选择器和ID选择器的区别】
           1、写法不同:class选择器用.声明,ID选择器用#声明;
           2、优先级不同:ID选择器>class选择器;
           3、作用范围不同:class选择器可以多次调用,ID选择器只能使用一次。

    4、通用选择器
    写法:*{}
    作用:可以选中页面中所有的HTML标签。
    优先级:最低!!
    例如:
    *{
      color: orange;
    }

    5、并集选择器
    写法:选择器1,选择器2,.....,选择器n{}
    生效规则:多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。
    例如:
    li,.first{
      color: red;
    }

    6、交集选择器
    写法:选择器1选择器2......选择器n{} 所有选择器紧挨着,没有分隔
    生效规则:多个选择器取交集,则必须满足所有选择器的要求,才能生效
    例如:
    li.first{
      color:red;
    }

    7、后代选择器
    写法:选择器1选择器2......选择器n{} 选择器之间空格分隔
    生效规则:只要满足,后一选择器是前一个选择器的后代,即可生效。(后代包括子代、
    孙代、重孙代 。。。)
    例如:
    div span{
      color:orange
    }

    8、子代选择器
    写法:选择器1>选择器2>......>选择器n{} 选择器之间用>分隔
    生效规则:必须满足,后一个选择器是前一个选择器的直接子代,才能生效。(
     中间不能间隔任何标签)
    例如:
    div>span{ 
      color: orangered;
    }

    【优先级的权重问题】
    1、css生效的第一原则是“近者优先”!即,哪个选择器作用于最里层标签,则这个选择器生效;

    2、当选择器作用于同一层时,可以根据优先级权重,进行累加计算:
     ID选择器为100 > class选择器为10 > 标签选择器为1
     注意:并集选择器,相当于多个选择器拆开写,所以,并集选择器的优先级不能累加。

    3、当选择器作用于同一层,且优先级权重相等时。则,写在最后的选择器生效。

  • 相关阅读:
    mysql explain用法和结果的含义
    heapset水平自动扩容
    dashboard安装
    对List集合中的对象进行按某个属性排序
    MySql查询当天、本周、本月、本季度、本年的数据
    三种List集合的遍历方式
    Date相关处理
    ubuntu-14.04.2-desktop使用方法
    PowerShell命令卸载Win10内置应用
    Windows下MySQL绿色版安装配置与使用
  • 原文地址:https://www.cnblogs.com/rsj1/p/7402348.html
Copyright © 2020-2023  润新知