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, 第7天

    陈志棚:成绩的统筹 李天麟:界面音乐 徐侃:代码算法 代码初步已经完成.还差最后一步整合.附上最后一张截图

  3. 在Windows Server 2008R2中部署 AspNetCore

    1.部署时,先安装运行时 https://dotnet.microsoft.com/download 2.安装vc_redist.x64   https://www.microsoft.com/en- ...

  4. Flask-论坛开发-5-memcached缓存系统

    对Flask感兴趣的,可以看下这个视频教程:http://study.163.com/course/courseLearn.htm?courseId=1004091002 ### 介绍:哪些情况下适合 ...

  5. lsof 查看端口占用的进程ID

    1. nohup execute >/dev/null 2>&1 & 提交了一个后台jobs 2. 然后查看一下 哪个进程正在用 3. yum 安装lsof yum ins ...

  6. SQLPLUS SQLCMD连接管理oracle sqlserver的简单用法

    1. SQLPLUS 与plsql一样,其实不需要安装oracle客户端,只要是有sqlplus的即时客户端 以及将目录放置到path或者是相应的oralce_home变量中即可. 打开运行cmd s ...

  7. HTTP协议整理

    一.概念 1.HTTP协议:即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和Web服务器之间互相通信的规则,它允许将超文本标记语言(HTML)文档从 ...

  8. thread run 和 start 的区别

    run 方法 也可以调用线程启动   但是单线程(为顺序执行) 而start方法 启动的线程为多个线程之间争夺cpu的执行权(为随机的) 摘录于http://www.cnblogs.com/sunfl ...

  9. linux学习之centos（三）：mysql数据库的安装和配置

    前言:mysql简介 说到数据库,我们大多想到的是关系型数据库,比如mysql.oracle.sqlserver等等,这些数据库软件在windows上安装都非常的方便,在Linux上如果要安装数据库, ...

  10. codeforces 1051 D. Bicolorings (DP)

    D. Bicolorings time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...