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. 小学四则运算APP 第三阶段冲刺-第一天

    团队成员:陈淑筠.杨家安.陈曦 团队选题:小学四则运算APP 第三次冲刺阶段时间:12.12~12.19 本次发布的是音乐播放功能,可以根据用户需求一边播放音乐一边做题,也拥有暂停播放音乐的功能,增强 ...

  2. AWK学习一例

    awk 'BEGIN { for (i = 1; i <= 7; i++) print int(101 * rand()) }'

  3. [转帖新闻]Windows 7时代即将终结:曾有多辉煌 如今就有多凄凉

    Windows 7时代即将终结:曾有多辉煌 如今就有多凄凉 投递人 itwriter 发布于 2019-01-18 10:47 评论(4) 有834人阅读 [收藏] « » 文/屠敏 来源:CSDN( ...

  4. 简单对比一下不同Windows操作系统在相同硬件配置的情况下浏览器js引擎的性能

    最近部门进行Windows客户端的测试产品单点性能, 感觉不在通的windows版本以及浏览器内核的情况下性能可能有差异, 也一直没有找到一个比较好的对比工具, 今天用chrome的控制台简单测试了下 ...

  5. python 授权

    1.“包装”意思是一个已经存在的对象进行包装,不管他是数据类型还是一段代码,可以是对一个已经存在的对象增加新的,删除不要的或者修改其他已经存在的功能 2.包装 包括定义一个类,他的实例拥有标准类型的核 ...

  6. python学习笔记四——循环及冒泡排序

    3.3.3 break 和 continue语句 break:跳出整个循环 continue:跳出当前循环继续后面的循环 例: x=int(input("please input the ' ...

  7. protocol buffer开发指南(官方)

    欢迎来到protocol buffer的开发者指南文档,一种语言无关.平台无关.扩展性好的用于通信协议.数据存储的结构化数据序列化方法. 本文档是面向计划将protocol buffer使用的到自己的 ...

  8. MSSQL约束【转】

    为了减少数据冗余和使数据库内容变的严谨,MSSQL数据库里引入了关系和约束.我们平时做一些小程序,需要使用到MSSQL数据库的时候大多没有严格去规划一下数据库的设计,但是真正开发的时候需要你严格的进行 ...

  9. Luogu4221 WC2018州区划分(状压dp+FWT)

    合法条件为所有划分出的子图均不存在欧拉回路或不连通,也即至少存在一个度数为奇数的点或不连通.显然可以对每个点集预处理是否合法,然后就不用管这个奇怪的条件了. 考虑状压dp.设f[S]为S集合所有划分方 ...

  10. BZOJ5297 [CQOI2018] 交互网络 【MatrixTree定理】

    题目分析: 这题是一道板题,属于MatrixTree定理的简单拓展,邻接矩阵与有向图邻接矩阵一致,度数矩阵作为入度矩阵.然后高斯消元即可. 代码: #include<bits/stdc++.h& ...