同级css使用一个样式_css调试与样式优先级

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

如上图所示

先用标签选择器选择某个标签

然后在elements区域就会自动找到该标签

然后在右侧的styles区域整个区域都是该标签的样式,从上到下是显示的优先级,被划掉的Style就是说明是被另一个样式覆盖了

把鼠标移动到style的样式上,会在每个样式上显示一个复选框,点击选中或者不选中就能本地调试样式

还能自己手动在element.style{}里面写上样式,element.style区域的css样式就是行内样式的意思,是最高级的样式

还能看到该样式的文件位置,也可能是行内样式

在本地调试完你自己想要的样式后,就可以去代码里改成一样的

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

一种是把原本的样式改了

另一种是用更高的选择器盖住原有的样式

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

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

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

行内样式是最强的,是和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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值