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

优先级是如何计算的？

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

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

<p>111</p> <!--红色-->

/* 就像这样，优先级相同，最终显示的颜色是红色，应用到元素上的是最后一个 */

p{color:blue;}

p{color:red;}

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

css有哪些选择器？

下面优先级依次递减

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

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

<!DOCTYPE html>

<html>

<head>

    <title>css优先级</title>

    <style type="text/css">

        div>p{color: blue;}/*子元素选择器--选择class为myclass下的所有子元素p元素*/

        h1+p{color: red;}/*兄弟元素选择器--选择和h1的所有兄弟元素p元素*/

        .myclass h1~p{color: yellow;}/*兄弟元素选择器--选择h1后面所有的p元素*/

    </style>

</head>

<body>

    <div class="myclass">

        <p>1111</p><!-- 蓝色 -->

        <h1>1111</h1>

        <p>1111</p><!-- 红色 -->

        <p>1111</p><!-- 蓝色 -->

        <div>

            <p>1111</p><!-- 蓝色 -->

            <h1>1111</h1>

            <p>1111</p><!-- 红色 -->

            <p>1111</p><!-- 蓝色 -->

        </div>

        <div class="myclass">

            <p>1111</p><!-- 蓝色 -->

            <h1>1111</h1>

            <p>1111</p><!-- 黄色 -->

            <p>1111</p><!-- 黄色 -->

        </div>

    </div>

</body>

</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. event.keyCode与event.which

        //Netscape/Firefox/Opera中不支持 window.event.keyCode,需要用event.which代替//IE用event.keCode方法获取当前被按下的键盘按 ...

  2. 关于测试中哪些信息需要放到jira上面

    1.每个新需求的功能点,全部在jira上一一呈现 2.每个bug也一样在jira上一一呈现 3.任务一个需要优化改进的点也一一在jira上呈现 然后程序员一直开发新功能和修改新bug,测试人员负责bu ...

  3. python登录网易163邮箱，爬取邮件

    from common import MyRequests,LoggerUntil,handle_exception myRequests.update_headers({ 'Accept':'tex ...

  4. faster-rcnn原理及相应概念解释

    R-CNN --> FAST-RCNN --> FASTER-RCNN R-CNN: (1)输入测试图像: (2)利用selective search 算法在图像中从上到下提取2000个左 ...

  5. 个人Android开发习惯[转载]

    以下内容转载自牛人博客,很多牛叉内容,请点击:http://www.stay4it.com/?p=281 Android三年,现在写代码,真心没什么很大的兴趣,每天都是优化代码,优化框架,技术支持.非 ...

  6. 计算 md5

    代码从polarssl中扒来的,略作改动,md5.h & md5.cpp 如下 #ifndef POLARSSL_MD5_H #define POLARSSL_MD5_H #include & ...

  7. html主要笔记

    1.用title属性作为工具提示 2.链接到锚点 <a href="http://wickedlysmart.com/buzz#Coffee"> 3.<em> ...

  8. 《C++标准程序库》笔记之四

    本篇博客笔记顺序大体按照<C++标准程序库(第1版)>各章节顺序编排. ---------------------------------------------------------- ...

  9. html/php/mysql乱码

    1. html通过jquery的ajax传递数据给php. encodeURI("my.php?name=博客园") 2. php接受 urldecode($_GET[" ...

  10. 在PowerDesigner中自动生成sqlserver字段备注

    在PowerDesigner中自动生成sqlserver字段备注 PowerDesigner是数据库设计人员常用的设计工具,但其自生默认生成的代码并不会生成sqlserver数据库的字段备注说明.在生 ...