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. 团队项目第二周spec设计

    本系统针对局域网进行联机聊天.聊天室分为服务器端和和客户端俩部分,服务器端程序主要 负责侦听客户端发来的信息,客户端需要登录到服务器端才可以实现正常的聊天功能. 1.本软件是一款局域网聊天软件,不能进 ...

  2. C语言ODBC数据库操作

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

  3. OneZero产品视频

    产品视频地址:http://v.youku.com/v_show/id_XMTU1MDMwOTk2OA==.html

  4. Windows server 2008 r2下载地址和激活破解方法

    Windows 7发布了服务器版本——Windows Server 2008 R2.同2008年1月发布的Windows Server 2008相比,Windows Server 2008 R2继续提 ...

  5. selenium之安装和登陆操作举例

    安装selenium: python -m pip install selenium-3.4.3-py2.py3-none-any.whl 下载对应浏览器版本的驱动,且在环境变量PATH中指定驱动程序 ...

  6. Python——多进程

    进程的实例 # -*- coding:UTF-8 -*- import os import time from multiprocessing import Process #进程 def func( ...

  7. 非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通过id进行维护与建文件

     非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通 ...

  8. Layui_HDFS目录（上传，下载，删除，分页，下级目录，键盘控制返回上一页）

    注:转载请署名 一.实体 package com.ebd.application.modules.fileManage.pojo; public class FilesOrDirs { private ...

  9. HTML-XML数据解析

    HTML代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  10. 修改 wordpress 后台管理员登录地址

    拷贝根目录下的 wp-login.php文件命名为wp-login.php.backup,把原文件重命名为managewp.phpsed -i "s/wp-login.php/managew ...