标签:load 序号 另一个 port 代码 strong 鼠标 通配符 input
如何查看一个标签的当前css样式
如上图所示
修改已有的样式有两种方式
先讲讲把原本的样式改了的方式
,在调试图里我们可以看到最后一个红色的框是一个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){ }
优先级
标签:load 序号 另一个 port 代码 strong 鼠标 通配符 input
原文地址:https://www.cnblogs.com/pengdt/p/12037503.html