层叠性

层叠性：权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了

权重：谁的权重大，浏览器就会显示谁的属性

我们现在已经学过了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那么就会有一个问题：如果我通过不同的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？也就是不同的选择器它们的优先级是怎样的呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

类选择器权重大于标签选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        p{

            color: red;

            font-size: 30px;

        }

        .spe1{

            color: yellow;

            font-size: 40px;

        }

    </style>

</head>

<body>

    <div>

        <p class="spe1">我是什么颜色</p>

        <p class="spe1">我是什么颜色</p>

    </div>

</body>

</html>

当权重一样的时候 是以后来设置的属性为准，前提必须权重一样 。‘后来者居上 ’。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .spe1{

            color: yellow;

            font-size: 40px;

        }

        .spe2{

            color: green;

            font-size: 40px;

        }

    </style>

</head>

<body>

    <div>

        <p class="spe1 spe2">我是什么颜色</p>

        <p class="spe1 spe2">我是什么颜色</p>

    </div>

</body>

</html>

前端 CSS层叠性 CSS选择器优先级的更多相关文章

  1. CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源

    CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...

  2. CSS学习笔记03 CSS层叠性、继承性、特殊性

    层叠性 所谓层叠性是指多种CSS样式的叠加,也就是说后面设置的样式会层叠(覆盖)之前的样式,层叠性的前提是CSS的选择器的优先级相同,例如,当使用内嵌式CSS样式表定义<p>标记字号大小为 ...

  3. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  4. css层叠性和继承性

    1.了解css层叠性 层叠性是什么?就是解决处理css选择器和属性冲突的能力.css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的??? 标签选择器 < 类选择器 < ...

  5. css层叠性冲突中的优先级

    一.首先从CSS级别来进行优先级划分: CSS控制页面样式的四种方法: 1.行内样式 通过style特性 <p style=”color:#F00; background:#CCC; font- ...

  6. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  7. css笔记09：选择器优先级

    1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. CSS——层叠性

    层叠性:浏览器渲染是从上而下的,当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码).和标签调用选择器的顺序没有关系. <!DOCTYPE htm ...

  9. CSS层叠性

    比较id,类,标签的数量 谁多就谁在上面 255个类的权重等于一个id 当权重一样时,以后设置的为准 通过继承而来的,权重为0 !important (设置权重无限大)可以影响权重,但只能影响选中的, ...

随机推荐

  1. 内置的os模块和sys模块

    os模块:与操作系统交互的一种接口 """ os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname& ...

  2. PAT Advanced 1077 Kuchiguse (20 分)

    The Japanese language is notorious for its sentence ending particles. Personal preference of such pa ...

  3. CTF各种资源：题目、工具、资料

    目录 题目汇总 Reverse 签到题 Web Web中等难度 Crypto 基础网站 各类工具 综合 Web Payloads 逆向 Pwn 取证 题目汇总 这里收集了我做过的CTF题目 Rever ...

  4. css3-文字与字体

    1. 给文字添加阴影---text-shadow 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴 ...

  5. sharepoint 2010 创建自定义的ASP.NET Web Service （上）

    项目背景 根据客户需求在SharePoint 2010 中创建自定义的ASP.NET Web Service可以分为3种方式(我所知道的).废话少说,下面一一列举: 创建方式 MSDN 官方博客自己的 ...

  6. 【Luogu4191】[CTSC2010] 性能优化

    题目链接 题意简述 求循环卷积意义下的 \(A(x)*B(x)^C\). 模数为 n+1 ,长度为 n. Sol 板子题. 循环卷积可直接把点值快速幂来解决. 所以问题就是要快速 \(DFT\),由于 ...

  7. 设计模式Design Pattern(1)--简介

    什么是设计模式? 软件开发人员在长期实践中总结出来的解决特定问题的一套解决方案. 对象设计原则 计模式主要是基于以下的面向对象设计原则. 对接口编程而不是对实现编程. 优先使用对象组合而不是继承. 设 ...

  8. php array_keys()函数 语法

    php array_keys()函数 语法 作用:返回包含数组中所有键名的一个新数组.直线电机选型 语法:array_keys(array,value,strict) 参数: 参数 描述 array ...

  9. 字符串截取模板 && POJ 3450、3080 ( 暴力枚举子串 && KMP匹配 )

    //截取字符串 ch 的 st~en 这一段子串返回子串的首地址 //注意用完需要根据需要最后free()掉 char* substring(char* ch,int st,int en) { ; c ...

  10. eclipse配置Maven——菜鸟篇

    首先解释关于webservice: Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序, 可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现 ...