最近学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. 【Flutter】348- 写给前端工程师的 Flutter 教程

    点击上方"前端自习课"关注,学习起来~ | 导语 最爱折腾的就是前端工程师了,从 jQuery 折腾到 AngularJs,再折腾到 Vue.React.最爱跨屏的也是前端工程师, ...

  2. HA-高可用集群

    原理:两台web服务器,通过心跳线进行通信,当主节点出现服务异常,备用节点通过探测判断主节点是否存活,若是不存活,就把服务接管过来. Web1和Web2中间有一根心跳线,检查对方的存活状态.流动IP: ...

  3. php与Redis实现一个100万用户的投票项目，如何实现实时查看投票情况？

    好了,什么是冷热数据交换呢? 很土的解释一下,冷数据就是之前使用的数据,有种过去式的感觉,而热数据就是当前的数据,理解为现在进行时吧.如何交换呢?就是将Redis的数据周期存储到mysql中! 整体的 ...

  4. Mysql服务彪高排查方式及索引的正确使用步骤

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/12af580d-1 ...

  5. VS2017 无法修改代码编辑区的项背景颜色问题

    以前都是好好的,安装  ClaudiaIDE: https://github.com/buchizo/ClaudiaIDE 之后也没啥问题,用着用着代码编辑区自定义的颜色就没有了,好几台电脑都是这样, ...

  6. FastJson中JSONString与各个对象的的转换关系及API示例

    前言 JSON作为一种轻量级的数据交换格式,在我们日常的开发中使用十分广泛,就Java后端的开发工作中,JSON字符串与Java对象之间相互转换是常常遇到的操作. 虽然平时用到的挺多的,但是因为用于J ...

  7. 如何编写一个TS程序?

    第一步:我们首先需要个代码编辑器-VSCode  点击此处下载(你会下载到rar文件) 第二步:我们还需要下载NodeJS,因为这里有npm,npm是包管理工具,可以下载TypeScript. 注意: ...

  8. 集合系列 Queue（十一）：ArrayDeque

    从名字我们可以看出,其实一个双向队列实现,而且底层采用数组实现. public class ArrayDeque<E> extends AbstractCollection<E> ...

  9. linux-发送文件夹rsync -avz salt-发送文件/文件夹

    linux下同步文件夹 rsync -avz /local_position/test_dir/ root@192.168.1.165:/target_position # ps:rsync -avz ...

  10. PageRank算法小结

    PageRank 这个学期选了数据挖掘的课程,期末要做一个关于链接分析算法的报告,这是PR算法的小结. 算法 PR算法基于等级权威的思想,及不仅考虑指向该网页的链接数,同时也考虑指向该网页网站的重要程 ...