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. CSS编码规则

    /* 和HTML一样使用两个空格来代替制表符 */ div { /* 为了代码的易读性,在每个声明块的左花括号前添加一个空格 */' padding: 15px; /* 每个声明语句的:后应该插入一个 ...

  2. 微软开源的Trill是什么？

    微软开源的Trill是什么? https://www.cnblogs.com/CattaC/p/10143445.html 微软开源的Trill是什么? 以下是一篇15年的文章的译文:https:// ...

  3. 什么是Consul

    什么是Consul Consul文档简要整理 什么是Consul? Consul是一个用来实现分布式系统的服务发现与配置的开源工具.他主要由多个组成部分: 服务发现:客户端通过Consul提供服务,类 ...

  4. eclipse webproject activiti

    https://stackoverflow.com/questions/42858723/activiti-eclipse-maven-project-to-dynamic-web-project-a ...

  5. HTTP Client使用总结

    1.如果服务器使用HTTPS协议,使用HTTPClient的话,需要配以EasySSLProtocolSocketFactory 2.Tomcat对HTTP的Post和Get请求处理是不一样的.Spr ...

  6. @Autowired的使用：推荐对构造函数进行注释

    在编写代码的时候,使用@Autowired注解是,发现IDE报的一个警告,如下: Spring Team recommends "Always use constructor based d ...

  7. vue-cli webpack项目npm run dev启动过程

    前言 通过vue init webpack和npm install命令初始化项目后,执行npm run dev就打开了网站http://localhost:8080.初学者不知道index.html. ...

  8. .net event 使用 Action

    Action<string> methodCall = (x) => { x += "haha"; MessageBox.Show(x); }; public e ...

  9. P2707 Facer帮父亲

    题目背景 Facer可是一个孝顺的孩纸呦 题目描述 Facer的父亲是一名经理,现在总是垂头丧气的. Facer问父亲,怎么啦?父亲说,公司出了点问题啊. 公司管理着N个风景点,每个风景点都有不少人来 ...

  10. Codeforces Round #420 (Div. 2) A,B,C

    A. Okabe and Future Gadget Laboratory time limit per test 2 seconds memory limit per test 256 megaby ...