最近学css样式，优先级有点繁琐，简单记录一下。

css中的优先级规则为：

  1. 有！important的最优先；
  2. 其次权重高的优先；
  3. 权重相同则后定义优先，会覆盖前面的。

至于权重：

  1. #id 为100；
  2. class类或伪类、属性选择器为10；
  3. 标签选择器为1
  4. 内联样式style= 为1000。

所以有上图的权重值。

至于继承，谁在body中更靠近p标签就用谁，若靠近程度一样，则继续用权重比较。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>权重</title>

    <style>

        #box1 .b p{

            color: green;}

        #box1 .b .c p{

            color: red;}

        #lyf p{

            color: yellow;}

        #box2 #box3 p{

            color: darkblue;}

        p{

            color: darkorange !important;}

        #box2{

            color: #123;}

        #box1{

            color: #789;}

    </style>

</head>

<body>

    <div id="box1"  class="a">

        <div id="box2" class="b">

            <div id="box3" class="c">

                <p id="lyf" class="d" >刘亦菲</p>

            </div>

        </div>

    </div>

</body>

</html>

关于css里决定样式优先级的权重的更多相关文章

  1. css样式优先级和权重问题

    内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...

  2. CSS样式优先级和权重问题（部分）

    内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...

  3. css调试与样式优先级

    如何查看一个标签的当前css样式 如上图所示 先用标签选择器选择某个标签 然后在elements区域就会自动找到该标签 然后在右侧的styles区域整个区域都是该标签的样式,从上到下是显示的优先级,被 ...

  4. 前端学习笔记——引入css文件、样式优先级

    CSS样式的引用方式有三种:行间样式表>内部样式表>外部样式表. 如果只有一种样式,那么优先级“由内到外 由近到远” 1.行间样式表--内联方式 内联方式指的是直接在 HTML 标签中的  ...

  5. css学习之样式层级和权重

    第一种情况 当选择器相同的情况下,引入方式的前后,决定页面最后的效果 ---------外部在最后面显示 ---------内部在最后面显示 第二种情况 引入方式相同时候,则是按照权重取最大(取权重最 ...

  6. CSS - 权重，样式优先级

    关于CSS权重,一套计算公式来去计算,就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准. 遇到样式应用问题,计算一下权重就知道优先级. 具体规 ...

  7. css样式权重优先级，css样式优先级

    原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...

  8. CSS权重及样式优先级问题

    CSS权重值计算 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]; (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值:对于内联样式,由于没有选择 ...

  9. css中的继承、层叠、样式优先级机制

    一.继承与层叠:

随机推荐

  1. ARTS-S ansible-playbook

    文件a.yml --- - hosts: cluster remote_user: ksotest gather_facts: false tasks: - name: delete dir if e ...

  2. 【JS】336- 拆解 JavaScript 中的异步模式

    点击上方"前端自习课"关注,学习起来~ JavaScript 中有很多种异步编程的方式.callback.promise.generator.async await 甚至 RxJS ...

  3. HPS端的GPIO如何控制

    该笔记主要记录HPS端的GPIO如何控制,包括控制LED和Key 1.GPIO地址映射 Peripheral Base Address 0xf000_0000 64M 2.HPS外设 (1)GPIO ...

  4. 使用 Vue + TypeScript 时项目中常用的装饰器

    目录 一.@Component 装饰器 1)父组件 2)子组件 二. @Emit 装饰器 1)父组件 2)子组件 三. @Model 装饰器 1)父组件 2)子组件 四. @Prop 装饰器 1)父组 ...

  5. 《Java知识应用》Java Excel读取（xls、xlsx）和写入

    第一步: 链接: https://pan.baidu.com/s/1emJpl7cpvKZyRMzWccAhJA 提取码: p3a7 复制这段内容后打开百度网盘手机App,操作更方便哦 下载jar包: ...

  6. Python自定义包引入【新手必学】

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:sys_song python中的Module是比较重要的概念.常见的情 ...

  7. Python基础-day02-2

    运算符 目标 算数运算符 比较(关系)运算符 逻辑运算符 赋值运算符 运算符的优先级 数学符号表链接:https://zh.wikipedia.org/wiki/数学符号表 01. 算数运算符 是完成 ...

  8. C++ lambda expression

    Emerged since c++11, lambda expression/function is an unnamed function object capable of capturing v ...

  9. 用 Keras 实现单词级的 one-hot 编码 & 使用散列技巧的单词级的 one-hot 编码

    from keras.preprocessing.text import Tokenizer samples = ['The cat sat on the mat.', 'The dog ate my ...

  10. IPFS学习-DNS链接

    DNSLink 什么是DNS链接 DNS链接使用DNS TXT记录映射域名(如ipfs.io)到一个IPFS地址.因为你可以编辑自己的DNS记录,可以使他们总是指向最新版本的IPFS中的对象(如果修改 ...