zoukankan      html  css  js  c++  java
  • CSS选择器

     

    一、CSS基础属性

     举列:h1{ color:red; text-align:  center; } 选择器:h1 声明块:{color:red; text-align:  center;}

                                

    二、CSS选择器

    CSS选择器,决定了将规则应用到哪些元素上

    三种基本选择器:元素选择器、类选择器、ID选择器

    除此之外,CSS还提供了大量的选择器

    三、声明冲突

    四、层叠概述

    什么是层叠:层叠是一种机制,用于解决CSS声明冲突

    多个相同的CSS声明(属性),应用到同一个元素上

    五、层叠过程:

    比较优先级每一个声明都有一个优先级

    当发生冲突时,优先级高的会保留,优先级低的会被淘汰

    一个声明的优先级,与它的来源和重要性有关

    1.浏览器默认样式表中的声明

    2.用户样式表中的普通声明

    3.作者样式表中的普通声明

    4.作者样式表中的重要声明

    5.用户样式表中的重要声明

    优先级由低到高排序

     

    比较特殊性:每一个声明都有一个特殊性(Specificity)

    当发生冲突时,特殊性高的会保留,特殊性低的会被淘汰

    一个声明的特殊性,取决于规则适用范围的大小

    规则适用范围越大,特殊性越低,适用范围越小,特殊性越高

    具体规则:

    示列:

    每一个声明都有一个特殊性(Specificity)

    当发生冲突时,特殊性高的会保留,特殊性低的会被淘汰

    一个声明的特殊性,取决于规则适用范围的大小

    规则适用范围越大,特殊性越低,适用范围越小,特殊性越高

     

     

    比较源次序

    最后出现的声明胜出,其他的全部淘汰

    该规则的实际应用:

    CSS Reset代码前置

    a元素的伪类书写顺序

     

    六、继承

    继承:继承(inherit),指子元素会自动拥有父元素的某些CSS属性

    CSS代码body{color:red}   

    HTML代码:

    <body>     body中的内容     <p>p元素中的内容</p> </body>

    p元素自动拥有了父元素bodycolor属性

    示列:

     

    继承发生的场景

    该属性是可继承的属性该属性在样式表中没有声明

  • 相关阅读:
    Windows 2008R2 安装PostgreSQL 11.6
    Redis-基础介绍
    SQL Server中的GAM页和SGAM页
    linux读写相关
    String 和 Stringbuild
    JVM(六)如何执行方法调用
    dubbo学习(三)实现细节
    dubbo学习(二)SPI
    spring boot
    MySQL学习(二十一)锁
  • 原文地址:https://www.cnblogs.com/jrzqdlgdx/p/10948956.html
Copyright © 2011-2022 走看看