合肥网站优化软件,小学生入门编程用什么软件,免费商标设计网,wordpress isCSS 的本质就是声明规则 ——《深入解析CSS》 文章目录 CSS层叠和优先级用户代理样式请和用户代理样式和谐相处 选择器单选择器的优先级选择器组的优先级关于选择器的其他源码顺序尽可能的选择优先级低的选择器 内联样式内联样式和JavaScript !important多个 !important 碎碎念… CSS 的本质就是声明规则 ——《深入解析CSS》 文章目录 CSS层叠和优先级用户代理样式请和用户代理样式和谐相处 选择器单选择器的优先级选择器组的优先级关于选择器的其他源码顺序尽可能的选择优先级低的选择器 内联样式内联样式和JavaScript !important多个 !important 碎碎念常用选择器单独选择器组合选择器 CSS
CSS全称为Cascading Style Sheets翻译过来叫 层叠样式表
顾名思义CSS由 层叠 和 样式表 两部分构成
样式表很好理解CSS会给引用他的文档内的元素设定各种各样的样式这些样式通常以键值对的形式出现。这使得CSS看起来就像是一份样式对照表一样所以叫样式表
但是层叠是什么玩意呢 层叠汉语里被用来形容东西都堆在同一个地方的状态
由此可知CSS的意思是堆叠在一起作用于同一批元素上的N个样式表
也就是说CSS的规则是叠加的元素最终呈现出来的样式是多个CSS样式共同作用的结果。当这些CSS样式之间存在对同一个属性的指定则需要应用优先级最高的那个这就是层叠 层叠和优先级
先从最简单的开始先看这段代码
bodyh1我是写在h1里面的文字/h1p我是p/p
/body这段代码长这样 这两段文字并没有紧贴到左上角不过我们不会因此觉得奇怪因为我们知道不同的HTML标签就是会展示出不同默认样式。实际上默认样式这个称呼不标准这个东西应该叫用户代理样式 用户代理样式
用户代理(User Agent) 是指你用来渲染这个HTML文档的计算机程序最常见的当然就是浏览器了
所以用户代理样式说白了就是你用的那个浏览器给HTML标签的基础样式
这个样式会随着你所使用的浏览器不同呈现出不同的效果比如上面那个例子是我在 chrome 里运行的效果如果把浏览器换成 Firefox她就会变成这样 请和用户代理样式和谐相处
如你所见不同的浏览器对同一种标签有不同的处理的方式因此很多人将用户代理样式看作洪水猛兽恨不得整个界面都用divspan写成以避开用户代理样式带来的影响
事实上虽然各个浏览器的用户代理样式不尽相同但原则上是一致的。h1-h6是加粗后的标题p标签是带margin的独段文字button是一个审美落后的按钮。HTML之所以要存在这么多标签不是为了让浏览器给他们写个完美的用户代理样式而是为了增强代码的可读性让维护这段代码的其他人理解这个元素的意义而不是对着一堆div做解谜游戏 选择器
用户代理样式是无法修改的不过好在她的优先级是最低的你写的任何css代码都可以轻易的覆盖她就像这样
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/title/headbodyh1 classnormal_word我是写在h1里面的文字/h1p我是p/p/body
/htmlstyle.normal_word {font-weight: normal;}p {font-size: 4em;}
/style我们在style标签中让h1的文字失去的加粗让p标签中的文字变成了原来的4倍
这种写法行话叫用 选择器声明样式。由于本文不是主要说明选择器的所以只在本文最后简单枚举一下常用的选择器 单选择器的优先级
对于 单选择器 来说优先级遵循以下规律 ID选择器 类选择器 属性选择器 伪类选择器 标签选择器 通用选择器(*) 用户编写的css规则优先级的本质其实就是比较所能影响的范围大小。所能影响的范围越小元素越明确那他的优先级越高
对单选择器来说
ID选择器 因为在同一个页面中id是唯一的所以id选择器只指定一个元素优先级最高类选择器、属性选择器和伪类选择器 都是可以改变属性/状态一致的一批元素所以优先级一致排第二标签选择器 就更多了只要是html标签是指定的标签就都会受到影响所以优先级更低通用选择器所有的元素都会受到影响几乎没有优先级可言 伪元素属于不同赛道的优先级他必须依赖其他选择器存在而且也必须用这种方式去指定他的样式就像这样 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div iddh1 classgreen_word我是div1中的文字/h1
/div
/body
/htmlstyle.green_word::after{display: block;content: 我是伪元素;color: red;}#d{color: green;}
/style虽然我用id选择器要求div下的所有前景色变成绿色但是使用类选择器伪元素的前景色属性优先级还是比他高 选择器组的优先级
但是如果是选择器组情况看起来就会复杂一点
就像这样
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div classnormal_wordh1 idh我是div1中的文字/h1
/div
/body
/htmlstyle.normal_word {font-weight: normal;}.normal_word h1 {color: green;}#h {color: blue;}
/style类名标签 的组合让这句话的文字变成绿色但是 ID选择器 要求这句话的文字变成蓝色
最终的结果显然是ID选择器胜出了 你玩过德州扑克吗简单来说就是玩家用自己手里的牌凑牌型然后用凑出的牌型比大小如果对方手里有比你大的牌型那你手里的牌点数多大都是输。当双方牌型一样了那我们就来比谁的点数大
选择器组在比较优先级时候的思路是一样的选择器组相当于牌型单选择器相当于点数。先看牌型如果我有一个id选择器那即使你手里有一万个类选择器优先级也没有我高 所以上例如果要让文字变成绿色应该这样做
.normal_word {font-weight: normal;
}.normal_word #h {color: green;
}#h {color: blue;
}.normal_word #h 的牌型是类选择器id选择器#h 的牌型是 id选择器
id选择器和id选择器互相抵消前者还有一个类选择器后者什么都没有了所以前者胜出就像这样 关于选择器的其他
源码顺序
还有一种情况的优先级值得说明一下那就是当两者的选择器优先级完全一致的时候写在后面的样式会覆盖前面的样式就像这样
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div classblue_word iddh1 idh classgreen_word我是div1中的文字/h1
/div
/body
/htmlstyle.blue_word #h {color: blue;}#d .green_word{color: green;}
/style两个选择器的都是 id选择器类选择器优先级完全一致此时文字的颜色由写在后面的样式决定
所以他是绿色的 把位置对调你就可以得到蓝色的文字
这个原则更多是用于你在一个页面上引用多个css文件的时候把针对性越强的内容放在越后面引用可以保证在选择器优先级一致的情况下应用针对性更强的样式 尽可能的选择优先级低的选择器
这个原则同样是在多个css文件共同工作时体现效力如果你在前面的css文件中使用优先级太高的样式会导致后面的针对性样式写起来很别扭 内联样式
你肯定知道除了上文提到的那种指定元素样式的方式以外你还可以通过把样式直接声明在元素的 style 属性中以指定这个元素的样式。这种写法我们将其称之为内联样式
根据上文我们推出来的优先级本质内联样式的优先级一定是极高的因为他只能对一个元素生效所以他比所有的选择器样式优先级都要高
就像这样
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div classgreen_wordh1 idd stylecolor: purple;我是div1中的文字/h1
/div
/body
/htmlstyleh1{color: red;}.green_word *{color: blue;}#d {color: green;}
/style我们分别用 标签选择器、类通用选择器 以及 id选择器指定了文字的不同颜色但是最终生效的却是元素style属性里面定义的样式。这是内联样式高于所有选择器样式或者说外部样式的结果 那你会说了不对啊id选择器也是只对一个元素生效为什么他的优先级没有内联样式高呢 因为同一个页面里只能有一个ID这个效果是我们给他加上的并不是硬性要求就像这样 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h1 idd我是div1中的文字/h1h1 idd我是div2中的文字/h1
/body
/htmlstyle#d {color: green;}
/style编辑器会提示你这种写法有问题但是浏览器是接受的 内联样式和JavaScript
在实际开发中我们经常会遇到使用JavaScript去修改元素样式的情况
这时候如果你用 element.style.…… 的方式去修改样式其实你是在给这个元素添加内联样式这会让所有与之相关的选择器失效
如果是针对性很强的JavaScript代码倒是问题不大可如果考虑到复用性这会导致所有引用你的JavaScript包的人想要修改这个元素的样式时感到很别扭
所以更优雅的做法应该是定义一个类选择器然后在JavaScript中去维护这个元素的类列表 !important
有的时候我们需要无视前面的所有规则把某一条规则的优先级提到最高这就是 !important 的领域了
就像这样
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h1 classred stylecolor: blue我是写在h1里面的文字/h1
/body
/htmlstyle.red {color: red;}h1 {color: green;}
/style很显然根据前面我们已经讲过的规则我们会得到一段蓝色的文字就像这样 这是因为内联样式优先级最高导致的可是如果我在h1这个标签选择器的规则中添加 !important那结果就会截然不同就像这样
h1 {color: green !important;
}明明是刚刚那段代码中优先级最低的标签选择器的样式被应用了
这就是 !important 标识的作用他可以无视所有规则要求指定的这条规则优先级提升到最高 多个 !important
那你会说了既然如此那如果 !important 也层叠了那怎么办呢就像这样
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h1 classred stylecolor: blue !important;我是写在h1里面的文字/h1
/body
/htmlstyle.red {color: red;}h1 {color: green !important;}
/style不只是标签选择器了现在连内联选择器也有 !important 了
还记得我们前面提到过的“牌型理论”吗我们现在把 !important 也当作一个牌型最大的牌型。所以抵消掉之后内联样式标签选择器所以我们会得到一段蓝色的文字
结果也印证了我们的猜想 碎碎念
讲完了最后整理一下CSS的层叠优先级
首先CSS样式分两种一种叫 用户代理样式一种是 作者样式 用户代理样式是浏览器自带的样式他的优先级永远比你写的作者样式优先级低 作者样式 又分有两种一种是 通过选择器选中元素进行指定的外部样式一种是 直接写在元素内的style属性里的内联样式 内联样式优先级默认比外部样式优先级高外部样式之间则通过比较选择器的优先级来决定谁的优先级更高伪元素属于另一个优先级赛道的选择器 当选择器优先级完全一致的时候应用哪个样式由书写顺序决定当你想要无视一切优先级规则强制应用一个样式时可以使用 !important 常用选择器
单独选择器
形式选择器名选择范围*通用选择器选择所有元素p元素选择器选择所有指定元素.className类选择器选择所有class属性中包含className的元素#IDID选择器选择所有id属性为ID的元素*[attrvalue]属性选择器选择所有attr属性为value的元素p:hover伪类选择器选定所有p元素的hover状态p::after伪元素选择器选定所有p元素后面的逻辑元素没有实体的
组合选择器
形式选择器名选择范围A,B选择器列表分组选择器选中所有A和所有BA B后代选择器选中A内的所有BAB直接后代选择器选中A内的所有直接子代BA~B兄弟选择器选择同个父元素下所有排在A后面的同级B无论是否紧挨AAB接续兄弟选择器选择同个父元素下紧挨在A后面的同级B 万分感谢您看完这篇文章如果您喜欢这篇文章欢迎点赞、收藏。还可以通过专栏查看更多与【CSS笔记】有关的内容
