如何查看一个标签的当前css样式

如上图所示

  1. 先用标签选择器选择某个标签
  2. 然后在elements区域就会自动找到该标签
  3. 然后在右侧的styles区域整个区域都是该标签的样式,从上到下是显示的优先级,被划掉的Style就是说明是被另一个样式覆盖了
  4. 把鼠标移动到style的样式上,会在每个样式上显示一个复选框,点击选中或者不选中就能本地调试样式
  5. 还能自己手动在element.style{}里面写上样式,element.style区域的css样式就是行内样式的意思,是最高级的样式
  6. 还能看到该样式的文件位置,也可能是行内样式
  7. 在本地调试完你自己想要的样式后,就可以去代码里改成一样的

修改已有的样式有两种方式

  1. 一种是把原本的样式改了
  2. 另一种是用更高的选择器盖住原有的样式

先讲讲把原本的样式改了的方式,在调试图里我们可以看到最后一个红色的框是一个css文件,这个文件就是这个样式的所在文件位置,去到样式源文件,搜索到code这个标签,把原本的样式删了,换新的上去就行

但是如果原本的样式是在公共文件,你随便删,会让整个项目的样式都发生改变,就不能用上诉方法,就需要用更高的选择器盖住原有的样式

css样式的优先级是同级显示后加载的,也就是自己的样式要写在最下面,在最后link引入,其实只要保证样式一样的选择器等级,写在最后加载就可以了,如果说不要,我就是要等级比原本的高,那就用样式等级去打败原本的样式,等级由标签内的style > id > class > tag,还有加法运算,比如id + class会大于id,这个具体自己分析,不难!

行内样式是最强的,是<style></style>和css文件不能比的,但是,除了封装插件,别用行内样式,因为这样html标签真的特别的难看,又臭又长,多用class选择器和id选择器

还有一个很强大的样式叫!important,他在行内样式没有一样用!important的情况下,比行内样式还高级,可以说是一个外挂一样的存在,平时写样式完全不会用这个的,只有在使用一些外部插件,需要修改外部插件的样式,并且是行内样式的时候,才会用到!

除了id选择器,class选择器,标签选择器外,还有些特殊的选择器

子元素选择器>,只给子元素添加对应的样式,同级或者子元素的子元素是不被影响的

#aa>.aa{  }

第一个弟弟选择器+只有写在他后面的同级的符合条件的第一个标签元素会被添加样式

#aa+.aa{  }

所有弟弟选择器~只有写在他后面的同级的符合条件的所有标签元素会被添加样式

#aa~.aa{  }

属性选择器,自定义属性也行

[disabled]{   }
[checked]{ }
[data-xx]{ }
input[type="text"]{ }

伪类选择器

#aa:after{   }
#aa:before{ }

序号选择权

.list:nth-of-type(2n){   }

优先级

  • 不同级别优先级: !important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
  • 相同级别优先级: 内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)

css调试与样式优先级的更多相关文章

  1. CSS权重及样式优先级问题

    CSS权重值计算 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]; (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值:对于内联样式,由于没有选择 ...

  2. CSS - 权重,样式优先级

    关于CSS权重,一套计算公式来去计算,就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准. 遇到样式应用问题,计算一下权重就知道优先级. 具体规 ...

  3. 关于css里决定样式优先级的权重

    最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...

  4. 前端学习笔记——引入css文件、样式优先级

    CSS样式的引用方式有三种:行间样式表>内部样式表>外部样式表. 如果只有一种样式,那么优先级“由内到外 由近到远” 1.行间样式表--内联方式 内联方式指的是直接在 HTML 标签中的  ...

  5. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  6. CSS样式优先级

    关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...

  7. css中的继承、层叠、样式优先级机制

    一.继承与层叠:

  8. 关于CSS样式优先级

    一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用!important可 ...

  9. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

随机推荐

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 显示代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. python爬虫(三) 用request爬取拉勾网职位信息

    request.Request类 如果想要在请求的时候添加一个请求头(增加请求头的原因是,如果不加请求头,那么在我们爬取得时候,可能会被限制),那么就必须使用request.Request类来实现,比 ...

  3. Mate Linux 桌面的什么受GNOME 2 粉丝喜欢 ?

    导读 如果你以前听过这个传闻:当 GNOME3 第一次发布时,很多 GNOME 用户还没有准备好放弃 GNOME 2. Mate(以马黛茶yerba mate植物命名)项目的开始是为了延续 GNOME ...

  4. day18-Python运维开发基础(单继承 / 多继承 / 菱形继承、类的多态)

    1. 单继承 / 多继承 / 菱形继承 # ### 继承 : 一个类除了自身所拥有的属性方法之外,还获取了另外一个类的成员属性和方法 """ 一个类可以继承另外一个类,那 ...

  5. 五、linux基础-shell机制

    5.1 shell机制1.Linux命令程序员可以看懂,但是操作系统是不懂这句话的含义的.因为所有的命令必须重新被解释然后传递给Linux内核才可以执行.这一被解释的机制就是shell. Linux命 ...

  6. kafka的搭建,命令

    a)kafka搭建 1.解压 2.修改配置/software/kafka_2.11-0.11.0.3/config/server.properties broker.id=0 log.dirs=/va ...

  7. Kafka 启动报错java.io.IOException: Can't resolve address.

    阿里云上 部署Kafka 启动报错java.io.IOException: Can't resolve address. 本地调试的,报错 需要在本地添加阿里云主机的 host 映射   linux ...

  8. Django 学习组件分页器与自定制分页器

    一.Django 分页器 1.django的分页器基础版 (1)首先是基础数据分别为 from django.db import models # Create your models here. c ...

  9. redis 之redis-sentinel主从复制高可用

    一.redis主从复制背景问题 Redis主从复制可将主节点数据同步给从节点,从节点此时有两个作用: (1)一旦主节点宕机,从节点作为主节点的备份可以随时顶上来. (2)扩展主节点的读能力,分担主节点 ...

  10. 《java核心技术:卷1》PDF版 和 Word版下载

    链接:https://pan.baidu.com/s/1OcpdZ4wfeo55xeJQQBHXRg 提取码:hds0