最近学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. Django 04

    目录 视图层 三个常用方法 JsonResponse FBV 和 CBV 模板层 模板语法 模板传值 过滤器 标签 自定义过滤器和标签 模板的继承 模板的导入 视图层 三个常用方法 HttpRespo ...

  2. 【Nodejs】326- 从零开发一个node命令行工具

    本文由 IMWeb 社区授权转载自腾讯内部 KM 论坛.点击阅读原文查看 IMWeb 社区更多精彩文章. 什么是命令行工具? 命令行工具(Cmmand Line Interface)简称cli,顾名思 ...

  3. 国内加速git下载速度

    主要是配置hosts文件 151.101.72.133 assets-cdn.github.com151.101.73.194 github.global.ssl.fastly.net192.30.2 ...

  4. python笔记03

    day03 一.今日内容: 1.整型 2.字符串 3.布尔类型 二.内容回顾和补充 脑图--xmind软件,processon 1.运算符补充(in.not in) value = "我是中 ...

  5. Vue-兄弟组件传值

    学习博客:https://www.jianshu.com/p/b10b3ac3729a

  6. JS内置对象-Array之indexOf和lastIndexOf

    indexOf() var num = [1, 7, 2, 3, 4, 7, 9] var pos = num.indexOf(7) var pos1 = num.indexOf(7, 2) cons ...

  7. 《Dotnet9》系列-开源C# WPF项目强力推荐

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  8. JVM 学习笔记二 ：JVM内存区域

    一.内存分配概述

  9. 小白的springboot之路（十二）、集成log4j2日志

    0.前言 日志记录对系统来说必不可少,spring boot中常用的日志组件有log4j.logback.log4j2,其中logback是spring boot默认的,已自带:选用log4j2就可以 ...

  10. C#中提示：当前上下文中不存在名称“ConfigurationManager”

    场景 想要在程序中获取App.config中设置的内容. 想要通过 ConfigurationManager.AppSettings[key]; 来进行获取,已经添加 using System.Con ...