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. 线性最长cover（无讲解）

    #include<bits/stdc++.h> using namespace std; ; int n,f[maxn],cover[maxn],R[maxn]; char str[max ...

  2. JS-02-js的变量

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

  3. echats 的使用

    第一步在我们的电脑上百度搜索echarts,点击进去,如下图所示: 2 第二步进去之后,点击下载,选择要下载的echarts版本,一般选择源代码,如下图所示: 3 第三步下载完成之后,我们也可以来使用 ...

  4. Spring Cloud服务注册中心交付至kubernetes

    前言 服务发现原则: 各个微服务在启动时,会将自己的网络地址等信息注册到服务发现组件中,服务发现组件会存储这些信息 服务消费者可以从服务发现组件中查询到服务提供者的网络地址,并使用该地址来远程调用服务 ...

  5. CUDA学习（三）之使用GPU进行两个数相加

    在CPU上定义两个数并赋值,然后使用GPU核函数将两个数相加并返回到CPU,在CPU上显示 #include "cuda_runtime.h" #include "dev ...

  6. TensorFlow 编程基础

    1.TensorFlow 安装:https://www.cnblogs.com/pam-sh/p/12239387.html https://www.cnblogs.com/pam-sh/p/1224 ...

  7. html网页压缩保存到数据库，减少空间占用，实现过程遇到的解压问题

    场景: python获取到网页,把网页gzip打包,并Base64编码保存: 由java负责Base64解码并解压二进制成html 遇到的问题: 1.python 的request,缺省就把gzip响 ...

  8. tf识别非固定长度图片ocr（数字+字母 n位长度可变）- CNN+RNN+CTC

    先安装必须的库 tensorflow_gpu==1.15.0 numpy opencv_python github: https://github.com/bai-shang/crnn_ctc_ocr ...

  9. html作业记录

    <html> <head> <title>Hello World</title> </head> <body> <!-- ...

  10. 每日一练_PAT_B1001

    鲁宾逊先生有一只宠物猴,名叫多多.这天,他们两个正沿着乡间小路散步,突然发现路边的告示牌上贴着一张小小的纸条:“欢迎免费品尝我种的花生!——熊字”.鲁宾逊先生和多多都很开心,因为花生正是他们的最爱.在 ...