这篇文章主要介绍了如何让CSS的权重变得更友好的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何让css的权重变得更友好文章都会有所收获，下面我们一起来看看吧。 技巧一：
这篇文章主要介绍了如何让CSS的权重变得更友好的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何让css的权重变得更友好文章都会有所收获，下面我们一起来看看吧。
技巧一：样式总是作为特定属性组合出现
一个很好的例子就是color和bakground-color的组合。除非你只做小调整，不然你需要一起调整他们。当给一个元素添加背景颜色时，它可能不包含任何文本，但可能会有一些子元素。因此，我们一起设置前景色(color)和背景色(background-color)，我们总是可以确定这些元素不会遇到任何易读性和对比问题。下次我们改变背景色时，不需要到处寻找需要修改的文本颜色，因为他们都以一个组合的形式出现在一起。
技巧二：使用动态值，比如currentColor和em等
有时候文本颜色也会使用在其他属性上。比如说border、box-shadow或者SVG图标中的fill上。定义相同颜色有一个替代方案，可以直接使用currentColor。默认情况下，color是可以继承的，你只需要在一个地方修改就可以改变其他属性的颜色。
同样的，给font-size属性使用em单位，允许你只修改:root的font-size就可以改变元素的盒模型大小。
技巧三：使用inherit属性值继承其父元素样式来覆盖UA自带样式。
像button、input这样的表单控件，不同的浏览器都会有自己的样式风格(UA样式)。我们可以使用inherit继承其父元素样式，从而覆盖浏览器的UA样式。
button,
input,
select,
textarea{
color:inherit;
font-family:inherit;
font-style:inherit;
font-weight:inherit;
}
上面示例代码取自sanitize.css、nORMalize.css也是这样使用的。如果你不是这样使用，说明你已经...
你也可以尝试在input[type="range"]、input[type="radio"]和input[type="checkbox"]等元素上直接使用前面介绍的currentColor属性自动匹配颜色。或许你不需要改变什么，可以将一个亮色系变成一个暗色系。
技巧四：每当你写CSS时，你想尽可能的回到树形顶部。换句话说，回到:root。
例如，我们的网站有一个侧边栏，希望在这个侧边栏上添加一个简短的个人介绍。其html的结构看起来可能会像这样：
<body>
<mainclass=“Posts”>
<asideclass=“SideBar”>
<navclass=“Nav”>
<pclass=“Bio”>
CSS是这样写的：
.Bio{
font-size:.8em;
line-height:1.5;
color:#888;
}
这样写是能正常工作的，并不存在样式上的问题。但是，侧边栏还有一个导航nav，很有可能他们有一些样式是相同的。在我们这个示例中font-size和color都是相同的。让我们把这些属性从nav和.Bio中提取出来，并且将它们添加到其父元素.SideBar中：
.SideBar{
font-size:.8em;
color:#888;
}
事实证明，在.Posts中已经设置了line-height:1.5;。似乎整个页面都使用了相同的行高，那么我们可以将.Bio和.Posts中的line-height移到根元素中：
:root{
line-height:1.5;
}
这看起来是一个CSS常识，但他也不会太关注兄弟元素定义同样的事情。这也让你发现，有一些代码产生重复。其实这并不可怕，因为我们只需要花点时间重新重构代码，但这样保持了CSS的代码处理健康状态。
关于“如何让css的权重变得更友好”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何让css的权重变得更友好”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网node.js频道。
--结束END--
本文标题: 如何让css的权重变得更友好
本文链接: https://www.lsjlt.com/news/90160.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0