工信部网站黑名单,专业定制网页设计,国内永久免费crm代码,wordpress微信接口文章目录 CSS的层叠和继承inheritinitial很多你以为的样式初始值#xff0c;其实是用户代理样式 碎碎念 CSS的层叠和继承
在上一篇 CSS和层叠、样式优先级 里已经讲过了层叠和优先级之间的关系#xff0c;但是在CSS中的层叠除了体现在争抢露脸机会的优先级之外#xff0c;还… 文章目录 CSS的层叠和继承inheritinitial很多你以为的样式初始值其实是用户代理样式 碎碎念 CSS的层叠和继承
在上一篇 CSS和层叠、样式优先级 里已经讲过了层叠和优先级之间的关系但是在CSS中的层叠除了体现在争抢露脸机会的优先级之外还体现在属性的延续性上 就像这样
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div classblue_wordh1 idh我是div1中的文字/h1
/div
/body
/htmlstyle.blue_word {color: blue;}
/style道友你有没有想过为什么明明被选中的是外层元素的类选择器可内部的元素的字体颜色也跟着变了
事实上这是CSS中的一个性质我们管他叫继承。对css中的样式继承
在一些属性没有指明属性值的情况下css会自动让他应用父元素的对应样式。但并不是所有的属性都会被继承通常来说只有跟文本有关系的比如 font-*colortext-* 等等。以及一些列表相关的属性会被继承
跟盒模型有关的内容比如margin、padding、border之类的属性则不会也不应该被继承
但是如果你硬要让一个不会被继承的属性去继承那可以使用关键字——inherit inherit
inherit本身就是继承的意思这个关键字简单明了。使用这个关键字后所指定属性的属性值将会和父元素一致
最常见的用法是用在统一那些被用户代理样式带偏的特殊标识比如标签
就像这样
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/title/headbodyp我是p标签里的内容a href#我是a标签里面的内容/a/p/body
/htmlstylep{color: green;}p a{text-decoration: none;}
/style我明明希望整个p标签里面的文字都是绿色的但是由于a标签的用户代理样式为他指定了color属性所以他不会继承标签的color样式这不是因为优先级的问题。我希望a标签里面的字体颜色跟着p标签走这样我改颜色的时候就不用改两个地方 所以这时候我们不会这样做
p,p a{color: green;
}
p a{text-decoration: none;
}而是会这样做
p{color: green;
}
p a{color:inherit;/*继承p的color属性*/text-decoration: none;
}他们的效果都是一样的 initial
当你希望把某个属性还原到最原始的状态时可以使用initial关键字
比如说还是用a标签举例如果上例变成这样
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
p我是p标签里的内容a href#我是a标签里面的内容/abra href# ida2我是第二个a标签里面的内容/a
/p
/body
/htmlstylep{color: green;}p a{color:inherit;text-decoration: none;}#a2{color: initial;}
/style前面的部分没有改但是我们新加入了id值为a2的a标签并把她的color值初始化因为id选择器优先级更高所以这个initial是一定生效的。那么问题来了这时候a2的文字应该是什么颜色呢 我相信会有道友回答蓝色但事实上他是黑的 为什么会回答蓝色因为a标签不经过任何处理的情况下就是蓝色字体啊
可你想过没有a标签的蓝色字体是用户代理样式给他的而不是说a标签本身就是蓝色字体 initial关键字的作用是把对应的属性值重置而不是重置成用户代理样式
他是跟着具体属性走的跟任何标签都没有关系color属性的初始值就是黑色 很多你以为的样式初始值其实是用户代理样式
如果你对initial的这一特性不了解那就会对他的一些行为觉得很诡异比如这个
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydivA/div
/body
/htmlstylediv{background: skyblue;}
/style理论上来说就算我把下面的样式改成这样
div{display: initial;background: skyblue;
}我得到的页面也应该是一样的 可结果让人大跌眼镜 这看起来就好像她变成了一个 行内元素 一样 是的他就是变成了一个行内元素根据 MDN 的说明display这个属性的初始值应该是inline哪怕是div也不例外 ——https://developer.mozilla.org/zh-CN/docs/Web/CSS/display 你可以理解成 initial 这个关键字针对的是当前这种属性跟元素无关。事实上不同的标签对css指定样式来说确实没有什么关系他们对css来说只在标签选择器里起作用而已 碎碎念
css的一些属性是可以自动继承的但是这些属性大都是文本相关和列表相关的属性你可以通过inherit关键字强制让某个属性继承父元素的值你可以通过initial关键字把指定的属性重置这种重置不是重置成用户代理样式 万分感谢您看完这篇文章如果您喜欢这篇文章欢迎点赞、收藏。还可以通过专栏查看更多与【CSS笔记】有关的内容
