• css选择器---继承,优先级,层叠


    CSS三大特性—— 继承、 优先级和层叠。

    继承:即子类元素继承父类的样式;

    优先级:是指不同类别样式的权重比较;

    层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式。

    css选择符分类  

    首先来看一下css选择符(css选择器)有哪些?


      1.标签选择器(如:body,div,p,ul,li)

      2.类选择器(如:class="head",class="head_logo")

      3.ID选择器(如:id="name",id="name_txt")

      4.全局选择器(如:*号)

      5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

      6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

      7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

      8.继承选择器(如:div p,注意两选择器用空格键分开)

      9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、hoveractive。注意:必须将伪类写在本身选择器之后,并且是伪类也有顺序link、visited、hoveractive,就是LVHA,这个叫爱恨原则,LoVe/HAte)

      10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

    [attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。  
    [attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。  
    [attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素



      11.子选择器 (如:div>p ,带大于号>)

      12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)

    css优先级

    当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,CSS有一套优先级的定义。

    不同级别时:

    1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
    2. 作为style属性写在元素内的样式
    3. id选择器
    4. 类选择器
    5. 标签选择器
    6. 通配符选择器
    7. 浏览器自定义或继承

          总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

    同一级别:

    选择器类别 说明 权重表示 权值表示
    行内样式 行内只有一个 style = "" (1.0.0.0)  1000
    id选择器 selector中使用了几个id,即#的个数 (0.1.0.0)    100
    类选择器

    类,伪类,以及属性的个数,如: .outerClass .buttonClass[type="button"]:hover{}

    选择器中有2个类,1个属性,1个伪类(0.0.4.0)

    (0.0.1.0)      10
    元素选择器

    伪元素和标签元素的个数,如: p:first-child

    选择器中有一个标签元素p和一个伪元素first-child

    (0.0.0.1)        1

    注意:权值实际并不是按十进制,用数字表示只是说明思想,一万个class也不如一个id权值高

    例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>cssTest</title>
        <style type="text/css">
            div.test{
                background-color:black;
                width:100px;
                height: 100px;
            }
        /*权重为0011*/
    
            .test.test2{
                background-color:red;
                width:100px;
                height: 100px;
            }
        /*权重为0020*/
    
        </style>
    </head>
    <body>
    <div class="test test2"></div>
    </body>
    
    
    </html>

    根据选择器中规则对应做加法,比较权值,从左到右进行比较,大的优先级越高,如果权值相同那就后面的覆盖前面的了

    之前有个面试官问我权重问题.题目如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>cssTest</title>
        <style type="text/css">
            div.test{
                background-color:black;
                width:100px;
                height: 100px;
            }
    
    
            .test{
                background-color:red;
                width:100px;
                height: 100px;
            }
    
        </style>
    </head>
    <body>
    <div class="test test2"></div>
    </body>
    
    
    </html>

    div是什么颜色?

    答案为黑色

    div.test权重为0011,  .test的权重为0010,所以显示的是div.test的样式.

    注意:

    1.CSS选择器的使用,应该尽量避免使用 !important 和 内联样式;id通常也是与class区分开使用,前者多用于JS中的结点定位,后者多用于CSS选择器;

    2.CSS选择器的解析原则是从右往左的,这样的好处是尽早的过滤掉一些无关的样式规则和元素 ;

    3.不要再id选择器前使用标签名(id选择是唯一的,加上标签名相当于画蛇添足);

    4.尽量少使用层级关系;

    5.使用类选择器代替层级关系.

    参考:

    https://www.cnblogs.com/zxjwlh/p/6213239.html

    https://www.cnblogs.com/nangezi/p/9042973.html

  • 相关阅读:
    CStringArray序列化处理
    【转】C++ Incorrect Memory Usage and Corrupted Memory(模拟C++程序内存使用崩溃问题)
    【转】Native Thread for Win32 C- Creating Processes(通俗易懂,非常好)
    【转】Native Thread for Win32 B-Threads Synchronization(通俗易懂,非常好)
    【转】Native Thread for Win32 A- Create Thread(通俗易懂,非常好)
    【转】关于OnPaint的工作机制
    Window发声函数Beep、MessageBeep
    Sqlite
    VC++ Splash Window封装类CSplash
    通过代码注册COM、DLL组件
  • 原文地址:https://www.cnblogs.com/echo-hui/p/9321994.html
走看看 - 开发者的网上家园