css原理：1.优先原则=>后解析的内容会覆盖之前解析的内容（所谓解析就是读取的css样式）2.继承原则=>嵌套里面的标签拥有外部标签的某些样式，子元素可以继承父元素的属性

1》优先原则针对选择器：a.同一个选择器从上往下读取执行css样式 b.同一类选择器从上往下执行 c.不同类型的选择器优先级，先执行低优先级再执行高优先级，比方基本选择器就是从*通配符<标签div<class选择器<id选择器 d.外部样式与内部样式合并之后再一起执行，根据从上往下执行顺序读取 e.内联样式也就是行内样式是最后执行的 f.加了！important字段是最后执行的

2》继承原则：2.1跟文字样式相关的可以被继承/其他的不能继承 2.2块级元素的宽度如果不设置会继承父元素的宽度，高度取决于它的内容

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>css的核心原理分为优先级原则与继承原则两大部分</title>

     <!-- 优先原则针对选择器：a.同一个选择器从上往下读取执行css样式

         b.同一类选择器从上往下执行 c.不同类型的选择器优先级，先执行低优先级再执行高优先级，比方基本选择器就是从*通配符<标签div<class选择器<id选择器

         d.外部样式与内部样式合并之后再一起执行，根据从上往下执行顺序读取 e.内联样式也就是行内样式是最后执行的 f.加了！important字段是最后执行的 -->

     <style type="text/css">

     div{

         /* color:#f90; */

         color:#f90 !important;

     }

     /* div{

         color:red;

     }

     .box1{

         color: yellowgreen;

     }

     #box2{

         color: violet;

     } */

     </style>

     <link rel="stylesheet" href="demo2.css"><!--新建demo2.css,文件内容div{color: blue;}-->

 </head>

 <body>

     <!-- <div class="box1" id="box2">我想起那天下午在夕阳下的奔跑,那是我逝去的青春</div> -->

     <div style="color: skyblue;">我想起那天下午在夕阳下的奔跑,那是我逝去的青春</div>

 </body>

 </html>

css的核心原理分为优先级原则与继承原则两大部分的更多相关文章

  1. CSS核心原理

    1.优先原则: 后解析的内容,会覆盖掉之前解析的内容: 同一个选择器:文件执行从上往下,后面的样式会覆盖前面的: 如下例中color最终为粉色: div { color:red; color:pink ...

  2. Spring核心原理分析之MVC九大组件（1）

    本文节选自<Spring 5核心原理> 1 什么是Spring MVC Spring MVC 是 Spring 提供的一个基于 MVC 设计模式的轻量级 Web 开发框架,本质上相当于 S ...

  3. Maven 核心原理

    Maven 核心原理 标签 : Java基础 Maven 是每一位Java工程师每天都会接触的工具, 但据我所知其实很多人对Maven理解的并不深, 只把它当做一个依赖管理工具(下载依赖.打包), M ...

  4. hadoop系列：zookeeper（2）——zookeeper核心原理（选举）

    1.前述 上篇文章<hadoop系列:zookeeper(1)--zookeeper单点和集群安装>(http://blog.csdn.net/yinwenjie/article/deta ...

  5. CSS的核心属性和浮动

    1.CSS属性组成和作用   属性:属性值 1)每个css样式都必须由两部分组成:选择符(Selector)和声明(Decleration) 注:声明又包括属性(Properyt)和属性值(Value ...

  6. SPA 路由三部曲之核心原理

    为了配合单页面 Web 应用快速发展的节奏,近几年,各类前端组件化技术栈层出不穷.通过不断的版本迭代 React.Vue 脱颖而出,成为当下最受欢迎的两大技术栈. 仅 7 个月的时间,两个技术栈的下载 ...

  7. Java Reference核心原理分析

    本文转载自Java Reference核心原理分析 导语 带着问题,看源码针对性会更强一点.印象会更深刻.并且效果也会更好.所以我先卖个关子,提两个问题(没准下次跳槽时就被问到). 我们可以用Byte ...

  8. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  9. HDFS 核心原理

    HDFS 核心原理 2016-01-11 杜亦舒 HDFS(Hadoop Distribute File System)是一个分布式文件系统文件系统是操作系统提供的磁盘空间管理服务,只需要我们指定把文 ...

随机推荐

  1. JS-03-数据基本类型与转换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. from .cv2 import * ImportError: DLL load failed: 找不到指定的模块。 >>>

    from .cv2 import * ImportError: DLL load failed: 找不到指定的模块. >>> 昨天看项目的时候遇到这个问题,折腾到深夜,网上的各种方法 ...

  3. Vmware14 开机黑屏或者以独占方式锁定此配置文件失败等问题解决办法

    把VMware14版本卸载掉,然后重装一个12版本的 打开之前创建的虚拟机,提示版本不兼容, 打开配置文件: 修改版本为重装的版本,比如12 然后编辑虚拟机设置指定一个系统,比如centos,即可 就 ...

  4. hadoop3.2.0集群搭建的一些坑!

    搭建步骤就不多说了,网上教程很多,这里列举几个: https://blog.csdn.net/pucao_cug/article/details/71698903   2.8版本 https://ww ...

  5. k8s-dashboard的部署与卸载

    相对于枯燥的命令行管理,控制台的管理方式相对就显得更加直观便捷了,虽然官方的dashboard有点不太好用,但是作为免费的dashaboard还是可以体验一番的,下面开始部署这个难用的dashboar ...

  6. Dubbo（二）：深入理解Dubbo的服务发现SPI机制

    一.前言 用到微服务就不得不来谈谈服务发现的话题.通俗的来说,就是在提供服务方把服务注册到注册中心,并且告诉服务消费方现在已经存在了这个服务.那么里面的细节到底是怎么通过代码实现的呢,现在我们来看看D ...

  7. Centos 7 x64 系统初始化

    前言 Hi,小伙伴们,系统初始化是运维工作中重要的一环,它能有效的提升工作效率,并且是标准化规范化的前提:它能省去要用时再去下载的麻烦,另外,还可以避免因未初始化引起的一些故障问题,可谓好处多多.系统 ...

  8. 题解 【[MdOI2020] Decrease】

    \[ \texttt{Preface} \] 感觉 C 比 B 还简单? \[ \texttt{Description} \] 给定一个 \(n×n\) 的矩阵,你可以进行若干次操作. 每次操作,你可 ...

  9. python 中列表 元组 字典 集合的区别

    先看图片解释 (1)列表 什么是列表呢?我觉得列表就是我们日常生活中经常见到的清单.比如,统计过去一周我们买过的东西,把这些东西列出来,就是清单.由于我们买一种东西可能不止一次,所以清单中是允许有重复 ...

  10. 13-Servlet&Request

    今日内容: 1. Servlet 2. Request Servlet 1. 概念 2. 步骤 3. 执行原理 4. 生命周期 5. Servlet3.0注解配置 6. Servlet的体系结构 se ...