css选择器的引用优先级,类型选择符用什么标记?
类选择符:自己定义的包含多条样式的集合,以“.”开头。可以在页面中重复使用该样式。如:.aaa{ ……}类型选择符:定义HTML固有标签的样式。前面不加“.”例如:p{ ……}ID选择符,和类选择符格式相同。区别在于以“#”开头,而且ID是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容例如:#aaa{ ……}通配符,顾名思意:对页面内所以标签都生效。其名称必须为“*”。例如:*{ ……}伪类:常用的有四个、即A标签里的四个状态(a:link a:visited a:hover a:active)。
其他的如:lang :focus等不常用,也存在兼容问题。
不同引入方式的优势与劣势有哪些?
常用的三种:1、页面中引入样式表文件,在单独的样式表css文件中编写样式代码,引入方式如下:然后在style.css文件中编写样式。这种最常用,优点是方便管理,样式统一,代码精简,用于全站统一样式。2、在Html头部(head)中用包起来,在这里面编写样式代码,如下:这种一般用于单页面或单独的专题页面,如果用于全站,增加页面代码,浪费流量,也不利于改版。3、在标签里面直接编写行内样式,这种是最不常用的:
这类最少用,会使页面结构混乱,代码臃肿,后期维护成本增加。css新元素是选择器还是别的?
css中的所有元素都是选择器,不论新元素还是旧元素,都是对标签的选择。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属性就变得不那么容易了!
喜欢我的回答就关注我吧,有问题可以发表评论,我们一起学习,共同成长!