css选择器的语法是，css层次选择器怎么用_CSS学习

当前位置：网站建设 > 技术支持

css选择器的语法是，css层次选择器怎么用_CSS学习

资料来源：网络整理时间：2023/3/4 1:34:54 共计：3571 浏览

1、css选择器的语法是，css层次选择器怎么用？

css层次选择器具体用法如下：

采用后代选择器：从上面可以看出所有的标签都是body的后代,那么我们使用后代选择器,就可以将body的后代(所有标签)改变样式: 后代选择器是用祖先加上空格再加上后代标签类型进行声明的。

以上资料供参考。

2、CSS属性与值的定义？

cascading style sheet 层叠样式表

CSS基本语法

css的定义方法是：

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值,如果一个属性有多个值，中间用空格隔开

代码示例：

div{ width:100px; height:100px; color:red }

用处：设置网页的显示效果（设置样式）

css将网页的显示效果和内容分离（降低了耦合性）

3、css选择器中后代选择器与子选择器的区别？

css后代选择器和子选择器的区别介绍：

1 css后代选择器语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。2、css子元素选择器语法：h1>em{color:red;} 表示的是从h1开始里面的第一层em元素变成红色，h1为祖先，em为儿子，就像世袭制一样，只能传给儿子，孙子和其他堂亲都不行

4、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和jquery选择器有什么不同，CSS的基本特征_CSS学习 | ·下一条：css扩展选择器，chrome浏览器有哪些插件比较好用_CSS学习