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. Apache Commons 相关工具类使用

    Apache Commons Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动.下面是我这几年做开发过程中自己用过的工具类做简单介绍. 组件 功能介绍 ...

  2. python之set集合操作

    set集合天生具有去重功能 1.创建集合,集合的value类型:string.tuple.frozenset.数字等不可变类型: s1 =set()#空集合 s2=set(") s3=set ...

  3. Capslock+程序介绍

    一直为编程时方向键不在盲打区域苦恼,今天接触了一个非常好的软件Capslock+. 软件特别小,一共只有九百多K,甚至不能称为软件,只能算一个很小的脚本了.但解决了我非常大的一个难题.安装好软件后可以 ...

  4. 拒绝低效！Python教你爬虫公众号文章和链接

    本文首发于公众号「Python知识圈」,如需转载,请在公众号联系作者授权. 前言 上一篇文章整理了的公众号所有文章的导航链接,其实如果手动整理起来的话,是一件很费力的事情,因为公众号里添加文章的时候只 ...

  5. 使用 FRP 让部门同事都能直接远程桌面办公（ 适用于 TEAM 和向日葵卡顿的用户）

    背景说明 这两天由于疫情的原因,很多公司都得在家远程上班,然后像我们这类小公司有没有 VPN 这些东西.传统的远程回公司只能依靠 Teamviewer 或者向日葵等工具.但是由于最近用户量很多,可能会 ...

  6. 三、通过 FactoryBean 来配置bean

    一般情况下,Spring 通过反射机制利用 <bean> 的 class 属性指定实现类实例化 Bean ,在某些情况下,实例化 Bean 过程比较复杂,如果按照传统的方式,则需要在 &l ...

  7. java核心技术----Object类

    package java.lang; /** * Class {@code Object} is the root of the class hierarchy. * Every class has ...

  8. Go语言标准库之net/http

    Go语言内置的net/http包十分的优秀,提供了HTTP客户端和服务端的实现. net/http介绍 Go语言内置的net/http包提供了HTTP客户端和服务端的实现. HTTP协议 超文本传输协 ...

  9. Codeforces_734_E

    http://codeforces.com/problemset/problem/734/E 每次操作可以把连通的同颜色的点全部换颜色,缩点,找直径,第一遍dfs找起点,第二遍dfs求直径. #inc ...

  10. Asp.net core下利用EF core实现从数据实现多租户（2） : 按表分离

    前言 在上一篇文章中,我们介绍了如何根据不同的租户进行数据分离,分离的办法是一个租户一个数据库. 也提到了这种模式还是相对比较重,所以本文会介绍一种更加普遍使用的办法: 按表分离租户. 这样做的好处是 ...