虽然学前端最刚开始就是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. win7 IIS7 发布网站遇到 HTTP 错误 500.19 由于权限不足

    win7 IIS7 发布网站遇到 HTTP 错误 500.19 - Internal Server Error 一看是5xx错误,就知道是服务器的问题,网上查了下,原来是权限问题 解决方法       ...

  2. MTK 精简ROM

    PhaseBeam.apk--------------------------------------动态壁纸光之韵律(可删) Phone.apk--------------------------- ...

  3. SQL Compare数据库比较工具 完全破解+使用教程

    来源http://www.cnblogs.com/duci/articles/4482665.html 一.使用教程 SQL Compare是编程人员常用的比较两个数据库之间差异的工具.可以用来比较数 ...

  4. Java按钮控件数组实现计算器界面

    编写程序,通过按钮数组来管理界面中的所有按钮控件,从而使用最少的代码实现模拟的计算器界面. 思路如下: 创建一个类,通过extends使其继承窗体类JFrame: 创建一个JFrame对象,使用JFr ...

  5. Dubbo -- 系统学习 笔记 -- 配置参考手册

    Dubbo -- 系统学习 笔记 -- 目录 配置参考手册 <dubbo:service/> <dubbo:reference/> <dubbo:protocol/> ...

  6. win7+ oracle +php环境的搭建

    http://blog.csdn.net/chchmlml/article/details/6887326 先下载个wmpp1.7.5(之前在xp上也是这个,所以就继续),安装,一切顺利,打开phpi ...

  7. 关于 Handler 与 opener

    我们可以使用 urllib.request.Request() 构造请求对象,但是对于一些更高级的操作,比如 Cookies 处理.代理设置 .身份验证等等,Request() 是处理不了的这时就需要 ...

  8. javaCompileOptions { annotationProcessorOptions { includeCompileClasspath = true } }

    一: 在app的build中android {    ...    defaultConfig {        ...        //添加如下配置就OK了        javaCompileO ...

  9. MDK972-EK开发板裸调试设置和裸机程序烧写（转）

    硬件平台:MDK972-EK开发板编译调试软件:KEIL uVision4仿真工具:JLINK V7/V8   本例子从串口输出信息,如图:       KEIL uVision4调试设置如图所示: ...

  10. javaweb项目中表单生成的验证码以及校验

    首先先来看一下项目的结构吧,有两个servlet,一个是进行验证码的生成以及存储的,一个是进行校验的,还有一个jsp页面是用来实现form表单的书写和展示: 我们只需要看这三个就行了,其他的自动忽略: ...