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. 使用git命令创建分支到团队项目

    背景 在我们的团队中,我作为管理者,创建了一个叫HelloWorld的项目,大家各自在本地进行开发,将自己的工作贡献到我们的团队项目中.为了便于审核,我希望大家先将自己的贡献先放在属于自己的一个分支上 ...

  2. Linux curl 一例

    root@PC-RENGUOQIANG:~# curl http://kermit:kermit@192.168.66.182:8080/activiti-rest/service/repositor ...

  3. Gradle下载类库源码

    https://blog.csdn.net/xiaoxing598/article/details/68958383 备选:https://www.cnblogs.com/yoyotl/p/62917 ...

  4. Eclipse: Difference between clean, build and publish

    https://stackoverflow.com/questions/5656989/eclipse-difference-between-clean-build-and-publish http: ...

  5. lumen或者laravel安装指定版本

    方法一 安装器安装:缺点不能安装指定版本 composer global require "laravel/lumen-installer" lumen new blog comp ...

  6. Activiti流程编辑器针对自定义用户角色表优化改造

    本文目的: 针对自定义的用户.角色表,对Activiti的在线流程设计器进行优化改造,使之能直接在图形界面上完成对节点办理人.候选人.候选组的配置,不需要先去查数据库中的用户ID.角色ID等信息再填入 ...

  7. [区块链]POW 与POS

    POW:全称Proof ofWork,工作证明. 这是什么意思呢?就是说,你能获得多少货币,取决于你挖矿贡献的有效工作,也就是说,你电脑性能越好,分给你的矿就会越多,这就是根据你的工作证明来执行货币的 ...

  8. [转帖]数据中心网络里的Underlay和Overlay

    数据中心网络里的Underlay和Overlay https://blog.csdn.net/zjc801blog/article/details/54289683 2017年01月09日 15:47 ...

  9. FuelPHP 系列（五） ------ Security 防御

    项目中难免会有 form 提交,对用户输入的所有信息进行过滤,可以避免 XSS 攻击,防止 SQL 注入. 一.设置配置信息 首先在 config.php 文件中,对 security 相关信息进行设 ...

  10. K3CLOUD替代方案

    路径 [生产制造]->[工程数据]->[替代方案]->[替代方案] 应用场景 实际业务处理中,由于订单取消.工程变更.客户需求变化.预测或计划不准确等原因造成原材料库存积压.呆滞,使 ...