最近的项目要自己写前端了，重新学习下前端的一下基本知识。

一般在css样式表中，上面的会被下面的覆盖，如下图，文字会显示蓝色：

所以按照正常的来说，下面的css样式，测试的文字应该还是蓝色

但结果，测试文字显示黄色，标签选择器的结果被属性选择器覆盖了，起作用的是属性选择器

结论：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器（id选择器和class选择器可以自行验证），

一般相等权重的按位置覆盖，不同权重的选择器，位置变了也不会覆盖

css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器的更多相关文章

  1. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  2. CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...

  3. 从零开始学习jQuery-------jQuery元素选择器(三)

    下面我们来介绍一下jQuery元素选择器,在Web开发中我们最常用的操作是获取元素,然后对获取的元素进行一系列的操作,jQuery根据获取页面元素的不同,可以将jQuery选择器分为四大类:基本选择器 ...

  4. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  5. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  6. CSS ID选择器(三)

    一.ID选择器 ID选择器使用"#"前缀标识符进行标识,后面紧跟指定的元素的ID名称. 如 #box{ width:100px; height:100px;} 元素的ID名称是唯一 ...

  7. CSS Id 和 Class选择器

    CSS Id 和 Class选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. 一.id 选择器 id 选择 ...

  8. css选择器(1)——元素选择器、类名和id选择器

    css的主要优点之一就是它能很容易地向所有同类型的元素应用一组样式.当然它是通过选择器来实现这一点的. 基本规则结构: 语法= 选择器 +声明块 1.元素选择器——直接使用html元素名,指向文档元素 ...

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

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

随机推荐

  1. Collections.sort自定义排序的使用方法

    Collections.sort自定义排序的使用方法 总结:Collections可以对List进行排序:如果想对Map进行排序,可以将Map转化成List,进行排序: public static v ...

  2. Day6_正则表达式

    用作匹配数据的方法: print(re.findall('\w','yangshuai 123 asd \n \t')) #w:匹配字母数字下划线 print(re.findall('\W','yan ...

  3. jsoup 使用总结3--高级用法之 not

    jsoup 使用总结3--高级用法之 not 大部分时候,我们使用jsoup解析网页的时候,都是直接找到某一类元素,或者按某种selector查询:具体使用方法可以参考jsoup官网文档 例子代码: ...

  4. CF877F

    题目大意:给定n个数有正有负,有Q次询问,每次询问区间[l,r]中有几个子区间满足和为k 做法:显然的莫队 每次用map记录一下当前区间[l,r]中的前缀和的值的个数 然后r的话找sum[r]-k的, ...

  5. MVC-AOP(面向切面编程)思想-Filter之IExceptionFilter-异常处理

    HandleErrorAttribute MVC中的基本异常分类: Action异常      T view异常 T, service异常     T, 控制器异常      F(异常get不到), ...

  6. Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏

    一.Bootstrap Bootstrap,来自 Twitter,是目前最受欢迎的前端框架. Python中,同样可以使用Bootstrap. 1. 导入Bootstrap库 from flask_b ...

  7. PHP多进程消费队列

    引言 最近开发一个小功能,用到了队列mcq,启动一个进程消费队列数据,后边发现一个进程处理不过来了,又加了一个进程,过了段时间又处理不过来了...... 这种方式每次都要修改crontab,如果进程挂 ...

  8. vue国际化高逼格多语言

    ## 1.NPM 项目安装 ``` cnpm i vue-i18n ``` ## 2.使用方法 ``` /* 国际化使用规则 */ import Vue from 'vue' import VueI1 ...

  9. Maven学习（一）-- Maven入门

    摘自:http://www.cnblogs.com/xdp-gacl/p/3498271.html 一.Maven的基本概念 Maven(翻译为"专家","内行" ...

  10. Java线程池中submit() 和 execute()方法的区别

    两个方法都可以向线程池提交任务, execute()方法的返回类型是void,它定义在Executor接口中, 而submit()方法可以返回持有计算结果的Future对象,它定义在ExecutorS ...