虽然学前端最刚开始就是html+css，一直因为这些看起来太简单就没有什么总结，不过看似很简单的东西，研究起来也深不可测，问起来js可能回答的头头是道，css这么简单的东西，其中一个优先级的问题就能难道大片人，知道有哪些css选择器，大部分人都能回答出常用常见的几个id选择器，类选择器，标签选择器，伪类选择器等，但应该大部分人都答不全。所以本篇打算总结一下css的选择器和其优先级。

优先级是如何计算的？

1. 优先级就是分配给指定的css声明一个权重。

2. 当优先级相等的时候，最后的那个声明将会被应用到元素上

  1. <p>111</p> <!--红色-->
  2. /* 就像这样，优先级相同，最终显示的颜色是红色，应用到元素上的是最后一个 */
  3. p{color:blue;}
  4. p{color:red;}

3. 当同一个元素有多个声明时，优先级才有意义。优先级高的会覆盖优先级低的样式。

css有哪些选择器？

下面优先级依次递减

除此之外，优先级：!important > 内联样式 > 外部样式

通过一个例子感受下，不常用的几个选择符（+、>、~），遵循上面的原则

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>css优先级</title>
  5.     <style type="text/css">
  6.         div>p{color: blue;}/*子元素选择器--选择class为myclass下的所有子元素p元素*/
  7.         h1+p{color: red;}/*兄弟元素选择器--选择和h1的所有兄弟元素p元素*/
  8.         .myclass h1~p{color: yellow;}/*兄弟元素选择器--选择h1后面所有的p元素*/
  9.     </style>
  10. </head>
  11. <body>
  12.     <div class="myclass">
  13.         <p>1111</p><!-- 蓝色 -->
  14.         <h1>1111</h1>
  15.         <p>1111</p><!-- 红色 -->
  16.         <p>1111</p><!-- 蓝色 -->
  17.         <div>
  18.             <p>1111</p><!-- 蓝色 -->
  19.             <h1>1111</h1>
  20.             <p>1111</p><!-- 红色 -->
  21.             <p>1111</p><!-- 蓝色 -->
  22.         </div>
  23.         <div class="myclass">
  24.             <p>1111</p><!-- 蓝色 -->
  25.             <h1>1111</h1>
  26.             <p>1111</p><!-- 黄色 -->
  27.             <p>1111</p><!-- 黄色 -->
  28.         </div>
  29.     </div>
  30. </body>
  31. </html>

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

css层叠样式优先级总结的更多相关文章

  1. css层叠规则,优先级算法

    前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...

  2. 层叠样式优先级CSS

    按照W3School网站(点这里直达)的说法,当同一个 HTML 元素被不止一个样式定义时,它们是有优先级之分的,如下,将优先级从小到大排列出来,其中4的优先级最高: 1.浏览器缺省设置2.外部样式表 ...

  3. css层叠样式初学

    一.css简介 1.层叠样式表:叠加效果,不同css对同一html修饰,冲突部分,优先级高作用,不冲突部分,共同作用 2.css作用 (1)修饰html (2)替代了标签自身的颜色,字号等属性,提高复 ...

  4. CSS 之 样式优先级机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 1.一般情况下,优先级从低到高,如下: 浏览器缺省(即浏览器默认) →(外部样 ...

  5. CSS层叠样式选择器归纳

     常用选择器 1.1 类型选择器:用来寻找特定类型的元素  标签 { 声明 } p { color:black; } h1 { font-weight:bold; } 1.2 后代选择器: 选择一个元 ...

  6. CSS层叠样式

    为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部 ...

  7. 学习前端第二天之css层叠样式

    一.设置样式公式 选择器 {属性:值:} 二.font 设置四大操作 font-size:字体大小 (以像素为单位) font-weight:字体粗细 font-family:字体    ( 可直接跟 ...

  8. css 选择器样式优先级

    !important > 行内 >id > class >tag >*

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

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

随机推荐

  1. MVC多语言设置 实战简洁版

    此方式可以通过更改进行更改进程语言设定,支持从系统获取默认的区域设定,支持自定义,自定义的方式可以为cookie,可为资料库获取,session等方式. 具体怎么设定就看个人需要了. 第一步: 添加资 ...

  2. 为VS code中的项目添加特定的智能提示功能

    当我们的在用vscode开发项目的时候, 如果项目中引用了jquery包, 我们可以下面的方式获得jquery的类型提示 npm install @types/jquery --save-dev 或我 ...

  3. 5 -- Hibernate的基本用法 --2 1 Hibernate 下载和安装

    1. 下载Hibernate压缩包 2. 解压:文件结构 ⊙ documentation : 该路径下存放了Hibernate的相关文档,包括Hibernate的参考文档和API文档等. ⊙ lib ...

  4. 转载用sql语句计算出mysql数据库的qps,tps,iops性能指标

    本帖最后由 LUK 于 2014-9-21 22:39 编辑 思路: 1 关注MYSQL三个方面的性能指标,分别为query数,transaction数,io请求数 2 在某个时间范围内(例如20秒) ...

  5. Elasticsearch 配置同义词

    配置近义词 近义词组件已经是elasticsearch自带的了,所以不需要额外安装插件,但是想要让近义词和IK一起使用,就需要配置自己的分析器了. 首先创建近义词文档 在config目录下 mkdir ...

  6. Android使用Handler造成内存泄露的分析及解决方法

    一.什么是内存泄露? Java使用有向图机制,通过GC自动检查内存中的对象(什么时候检查由虚拟机决定),如果GC发现一个或一组对象为不可到达状态,则将该对象从内存中回收.也就是说,一个对象不被任何引用 ...

  7. tp3.2分页功能

    后台 1.利用Page类和limit方法分页 $User = M('User'); // 实例化User对象 $count = $User->where('status=1')->coun ...

  8. 【架构师之路】 LVS+Keepalived实现高可用负载均衡

    一.原理        1.概要介绍        如果将TCP/IP划分为5层,则Keepalived就是一个类似于3~5层交换机制的软件,具有3~5层交换功能,其主要作用是检测web服务器的状态, ...

  9. vue笔记 - 组件间通信 之 中央事件总线bus

    中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...

  10. ERROR 1045 (28000): Access denied for user 'mycat'@'localhost' (using password: YES)

    创建用户: mysql> grant all on db1.* to mycat@'%' identified by '123456'; Query OK, 0 rows affected (0 ...