HTML&CSS基础-选择器的优先级

                                          作者:尹正杰

版权声明:原创作品,谢绝转载!否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title> <style type="text/css">
/**
* 选择器的优先级:
* 当使用不同的选择器,选中同一个元素并且设置相同的样式时,这样样式之间就会产生冲突,最终采取哪个选择器定义的样式,由选择器的优先级(权重)决定,
* 优先级高的优先显示;
* 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后再比较,但是选择器优先级计算不会超过他的最大的数量级,比如10个id选择器优先级权限相加最大不会超过1000,也就是相加后只有900.
* 如果选择器的优先级一样,则使用靠后的样式;
* 并集选择器的优先级是单独计算,如"div,p,#web,.hello{}"这是并集选择器,但计算优先级时单独划分计算的,并不会将所有的并集选择器的元素优先级相加。
* 可以在样式的最后,添加一个"!important",则此时样式将会获得一个最高的优先级,将会优于所有的样式显示,甚至优先级高于内联样式,但是在开发中尽量避免使用"!important",因为整个项目可能时多人协作开发,如果你写死了,有可能会出现别的开发人员怎么调整选择器均无法改变的显现。维护成本不太高;而且我们在开发中一般会使用js去修改html的样式,如果你在css中写死了发现js是改不掉的。
*
* 优先级的规则(数值越大代表优先级越高):
* 内联样式:
* 优先级为1000
* id选择器:
* 优先级为100
* 类和伪类:
* 优先级为10
* 元素选择器:
* 优先级为1
* 通配优先级(*):
* 优先级为0
* 继承的样式:
* 没有优先级
*
*/ p{
background-color: rosybrown;
} #web{
background-color: royalblue;
} p#web{
color: yellowgreen;
} *{
font-size: 50px;
} .hello{
color:blue ;
background-color: deeppink !important;
} .world{
color:yellow ;
} </style>
</head>
<body> <p class="hello world" id="web" style="background-color: yellow;">我是一个p标签
<span>我是p标签中的span标签</span>
</p>
</body>
</html>

二.浏览器打开以上代码渲染结果

Nginx 入门指南的更多相关文章

  1. 转:nginx入门指南,快速搭建静态文件服务器和代理服务器

    本文介绍 Nginx 入门基础知识,让你迅速搭建 Nginx 服务器.主要内容包括 Nginx 安装和简单使用.Nginx的简单原理.Nginx 配置文件的结构.如何使用 Nginx 来提供静态文件服 ...

  2. nginx使用与配置入门指南

    这是一篇关于nginx使用与配置的入门指南,但不包括nginx的编译与安装.我假定你知晓如何安装nginx.对大多数Linux系统来说,nginx都已经存在于它们的软件包里,直接使用系统提供的软件管理 ...

  3. ngnix 一 入门指南

    翻译自:ngnix--Beginner Guide ##ngnix入门指南 本指南给出了nginx的基本介绍,并介绍了可以使用它的完成一些简单任务. 它假定nginx已经安装在读者的机器上. 如果不是 ...

  4. Nginx 入门学习教程

    昨天听一个前同事说他们公司老大让他去研究下关于Nginx 方面的知识,我想了下Nginx 在如今的开发技术栈中应该会很大可能会用到,所以写篇博文记录总结下官网学习教程吧. 1. 什么是Nginx? 我 ...

  5. javaCV入门指南:序章

    前言 从2016年6月开始写<javacv开发详解>系列,到而今的<javacv入门指南>,虽然仅隔了两年多时间,却也改变了很多东西. 比如我们的流媒体技术群从刚开始的两三个人 ...

  6. Docker 入门指南

    Docker 入门指南 目录 基础概念 安装教程 基本操作 常用安装 构建操作 容器编排 壹.基础概念 什么是Docker? Docker是基于Go开发的应用容器引擎,属于 Linux 容器的一种封装 ...

  7. Web API 入门指南 - 闲话安全

    Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...

  8. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  9. yii2实战教程之新手入门指南-简单博客管理系统

    作者:白狼 出处:http://www.manks.top/document/easy_blog_manage_system.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文 ...

随机推荐

  1. PolarCode

    什么是polar code极化码 为了实现可靠的信号传输,编码学家在过去的半个多世纪提出多种纠错码技术如里所码(RS码).卷积码,Turbo码等,并在各种通信系统中取得了广泛的应用.但是以往所有实用的 ...

  2. 第三个spring冲刺第1天

    在第二阶段,我们的要实现的基本功能都已经基本是实现了,现在在第三阶段,我们会完善算法的改进.容错问题的兼容还有附加的其他功能,例如计时等

  3. C语言ODBC数据库操作

    今天我们来介绍一下C语言操作数据库的方法,这里我们使用的是ODBC方式.环境是WIN7+VC6.其他环境也差不多,具体情况具体分析. 首先是环境的配置以及数据源的添加.这里就不去解释了,相关资料网上有 ...

  4. 3.27PSP及体会

    首先,我还是第一次了解老师这种先喂鸡汤,再打鸡血的行为,大老板的出现让我有些措手不及,我 的 天 啊! 话说这周alpha版本实现,真的是好费脑筋,因为预定是4~6周的项目一周弄完,而且还是在拥有几个 ...

  5. 设计模式笔记:策略模式(Strategy)

    1. 策略模式简介 1.1 定义 策略是为达到某一目的而采取的手段或方法,策略模式的本质是目标与手段的分离,手段不同而最终达成的目标一致.客户只关心目标而不在意具体的实现方法,实现方法要根据具体的环境 ...

  6. Java之StringBuffer使用方法

    package basic; //StringBuffer的使用方法,用于保存频繁修改的字符串 public class StringBufferDemo { public static void m ...

  7. BZOJ1304 CQOI2009叶子的染色(树形dp)

    令f[i]表示i子树内最少染色次数,加上012状态分别表示该子树内叶节点已均被满足.存在黑色叶节点未被满足.存在白色叶节点未被满足,考虑i节点涂色情况即可转移.事实上贪心也可以. #include&l ...

  8. 浅析python日志重复输出问题

    浅析python日志重复输出问题 问题起源: ​ 在学习了python的函数式编程后,又接触到了logging这样一个强大的日志模块.为了减少重复代码,应该不少同学和我一样便迫不及待的写了一个自己的日 ...

  9. So you want to be a 2n-aire? UVA - 10900(概率)

    题意: 初始值为1, 每次回答一个问题,如果答对初始值乘2,答错归0,结束,一共有n个问题,求在最优的策略下,最后值的期望值 解析: 注意题中的一句话  每个问题的答对概率在t和1之间均匀分布  也就 ...

  10. 洛谷P2257 YY的GCD

    今日份是数论 大概是..从小学奥数到渐渐毒瘤 那就简单列一下目录[大雾 同余 质数密度 唯一分解定理 互质 完全剩余系 简化剩余系 欧拉函数 逆元 斐蜀定理 阶(及其性质) 欧拉定理 费马小定理 原根 ...