选择器的优先级主要用于样式发生冲突的情况下

选择器范围越小，优先级越高

行内样式>id选择器>类选择器>标签选择器>通用选择器

这里涉及一个权重值的问题，权重值越高，优先级越大

权重值

HTML分别为每种类型选择器分配了一个权值：

（1）通用选择器

权重值：0

（2）标签选择器

权重值：1

（3）类选择器

权重值：10

（4）ID选择器

权重值：100

（5）行内样式

权重值：1000

权重值的计算：

权值的计算很简单，直接看代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			a{color: yellow;}/*1*/

			div a{color: green;}/*1+1*/

			.demo a{color: black;}/*10+1*/

			#demo a{color: orange;}/*100+1*/

			div#demo a{color: red;}/*1+100+1*/

		</style>

	</head>

	<body>

		<a href="">this is 黄色</a>

		<div class="demo">

			<a href="">this is 黑色</a>

		</div>

		<div id="demo">

			<a href="">this is 红色</a>

		</div>

	</body>

</html>

运行结果：

自己在编译器敲敲就懂了

HTML选择器的权重（优先级）的更多相关文章

  1. CSS选择器的权重与优先规则？

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  2. css三大特性 & 选择器的权重

    层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候会发生冲突,一个属性会覆盖另外一个属性. 覆盖性原则: 层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标 ...

  3. css样式权重优先级，css样式优先级

    原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...

  4. css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

  5. css复合选择器的权重

    选择器的权重 标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器 ...

  6. HTML+css基础 css选择器 选择器的权重

    css选择器  选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...

  7. 请写出css中选择器（元素选择器、类选择器、id选择器）的优先级顺序，和当各种选择器组合时，优先级的计算规则是什么？

    id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...

  8. CSS选择器整理以及优先级介绍

    一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...

  9. 常见CSS选择器的权重和优先级

    一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...

  10. css选择器有哪些，选择器的权重的优先级

    选择器类型 1.ID #id 2.class .class 3.标签 p 4.通用 * 5.属性 [type="text"] 6.伪类 :hover 7.伪元素 ::first-l ...

随机推荐

  1. LeetCoded第2题题解--两数相加

    2.两数相加 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表 ...

  2. linux(1)------vmvear虚拟机安装linux

    1.VMvare14(个人下载,软件付费,自行解决) 2.CentOS下载           https://www.centos.org/download/    官方网址,后期会跳转本地镜像站 ...

  3. 我对数据库事务的理解（MYSQL中）

    -- 设置数据库事务为手动的提交SET @@AUTOCOMMIT = 0;-- 查看是否被修改SELECT @@autocommit;-- 查看当前的编码格式SELECT @@character_se ...

  4. Servlet的类加载器

    Java虚拟机中内嵌的一个类加载器:Bootstrap,属于Java虚拟机的内核,负责加载Java核心包中的类(即rt.jar文件中的类):Java核心包中有另外两个类加载器:ExtClassLoad ...

  5. 微信支付 调用支付jsapi缺少参数total_fee 和 支付验证签名失败 prepay_id配置问题

    =======================================================先熟悉一下统一下单api所需要的参数=========================== ...

  6. windows 10 + tensorflow-gpu 环境搭建

    安装过程可基本按照ubuntu装法,参考https://www.cnblogs.com/xbit/p/9768238.html 其中: conda配置文件:C:\Users\Administrator ...

  7. 搭建私服仓库：（一）Windows安装Nuxus

    Nexus下载 官网.官网下载.百度云盘 提取码:su33 将nexus下载下来,以2.14.5的windows版本为例子(3.x暂时下载不下来,迅雷会员都不行) 下载后进行解压,得到以下目录: 其中 ...

  8. （1）RabbitMQ在Docker上安装

    1.简介 在来学习RabbitMQ时候,我觉得很有必要先把它的环境先搭建起来,这样后面的示例才能进行.因为之前自己手动在Linux服务器上搭建过Elasticsearch,当时踩过太多坑了,浪费太多时 ...

  9. JDK方法区、元空间区别 & String.intern相关面试题

    一.方法区.永久代.元空间 1.方法区.永久代 方法区也是各个线程共享的内存区域,它用于存储已经被虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据.方法区域又被称为"永久代& ...

  10. Vue 路由跳转报错 Error: Avoided redundant navigation to current location: "/XXX".

    在router文件夹下的index.js中加入红色字体代码即可解决 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(V ...