@ postcss和cssmodule是什么?
postcss是什么?
根据官网的解释,它是一种javascript编写的工具,用来转化css的。可以认为它是处理css的插件集合,需要配合诸如webpack、gulp等编译工具才能展现它强大的能力。
目前社区提供了非常多的插件,比较有名的如下:
autoprefixer 可以为css的属性配置兼容性的前缀,不需要手动添加postcss-preset-env 允许你使用更加现代的css特性stylelint 检查css语法错误cssnano css的压缩器等等postcss的原理
如果大家了解babel的原理,那就应该听说过AST即抽象语法树。编译器将字符串进行词法分析、语法分析,再做转换,最终达到预期的结果。postcss也是同样的原理,这个包已经为使用者提供了解析的方法parse,并且也提供了很多转化的API,利用这些就可以自己开发一款postcss插件了。
css Module是什么?
先前呢,大家使用css选择器,它是对整个页面是有效的,也就是全局的,当你每次迭代需求的时候,需要考虑每次添加新的css是否会影响到其他地方,所以大家有时选择为样式表添加命名空间。css Module为大家提供了另外一种开发方式,它可以使css具有局部作用域。
用法如下:
用法是如此的简单,基本一看就会,css-loader为大家提供了css Module的开关,只要为css-loader添加参数选项modules就可以开启。注意:它必须放在less或者sass的loader之前。
那它如何做到局部作用域的呢?
打开element面板可以发现,它把class变成了md5戳,对应每个组件,保持唯一。
vue的scoped
由此大家联想到vue的scoped,它也解决了css局部作用域的问题!
它在dom上生成了一个data属性,并且给class选择器添加了属性选择器,类似于之前的md5戳。不过由于添加了属性选择器,使得选择器的优先级变高了,想在组件外面覆盖css属性就变得不那么容易了!
喜欢偶的回答就关注偶吧,有问题可以发表评论,大家一起学习,共同成长!
@ css选择器识别范围?
css选择器优先级核心:每个选择器本身有优先级,作用范围越具体优先级越高。
CSS优先级从高到低分别是:
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器选择器
当CSS样式的规则由多个选择器组成时,id选择器的权值为1000,class选择器为100,标签选择器为10,按权值求和的记过高低决定哪个优先。当两个css规则的权值相同时,谁更具体用谁,也就是权值高的选择器作用的越具体优先级越高。当两个选择器规则和权值都是一样,后面样式会覆盖前面的!
@ 标签选择器有哪些?
1. 标签名选择器 div { color:Red;} /即页面中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} /即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red;} /即页面中的标签的id
4.后代选择器(类选择器的后代选择器) .divClass span { color:Red;} /即多个选择器以逗号的格式分隔 命名找到准确的标签
5.群组选择器 div,span,img {color:Red} /即具有相同样式的标签分组显示
如果觉得《css选择器csdn 类选择器语法 – CSS – 前端 css3渐变兼容性》对你有帮助,请点赞、收藏,并留下你的观点哦!