层叠性

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

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

我们现在已经学过了很多的选择器，也就是说在一个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. ssh修改超时自动登出时间的方法

    echo $TMOUT 查看当前服务器登出时间,如果没有输出表示不会登出 1.修改:vim ~/.bash_profile 2.设置TMOUT值 TMOUT=600 #表示10分钟之后自动登出 TMO ...

  2. L3-015. 球队“食物链”

    某国的足球联赛中有N支参赛球队,编号从1至N.联赛采用主客场双循环赛制,参赛球队两两之间在双方主场各赛一场. 联赛战罢,结果已经尘埃落定.此时,联赛主席突发奇想,希望从中找出一条包含所有球队的“食物链 ...

  3. 如何设置Linux虚拟机的IP地址

    本文会详细的解释如何在Linux虚拟机下设置IP地址 我的虚拟机是CentOS 首先,打开你的虚拟机 1.修改主机名 修改完主机名之后,别忘了用:wq命令保存退出 然后我们来设置虚拟机的IP地址 首先 ...

  4. java 模拟表单方式提交上传文件

    /** * 模拟form表单的形式 ,上传文件 以输出流的形式把文件写入到url中,然后用输入流来获取url的响应 * * @param url 请求地址 form表单url地址 * @param f ...

  5. 带加载进度的Web图片懒加载组件Lazyload

    在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验. Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏 ...

  6. MyEclipse XML & XML架构教程：XML编辑器

    [MyEclipse CI 2019.4.0安装包下载] 1. MyEclipse中的XML编辑 本文档介绍了MyEclipse XML Editor中可用的一些函数.MyEclipse XML编辑器 ...

  7. Django【第24篇】：JS实现的ajax和同源策略

    JS实现的ajax和同源策略 一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器 ...

  8. 《转》tensorflow学习笔记

    from http://m.blog.csdn.net/shengshengwang/article/details/75235860 1. RNN结构 解析: (1)one to one表示单输入单 ...

  9. CMD命令行二

    图形化用户界面 calc control mmc notepad regedit (start命令也有用) dir | findstr /i "for" 忽略大小写查找 finds ...

  10. <知识整理>2019清北学堂提高储备D2

    简单数据结构: 一.二叉搜索树 1.前置技能: n/1+n/2+……+n/n=O(n log n)  (本天复杂度常涉及) 2.入门题引入: N<=100000. 这里多了一个删除的操作,因此要 ...