700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > css中选择器的优先级 学习web前端开发 – CSS – 前端 css label 靠右

css中选择器的优先级 学习web前端开发 – CSS – 前端 css label 靠右

时间:2021-05-27 15:56:40

相关推荐

css中选择器的优先级 学习web前端开发 – CSS – 前端 css label 靠右

相对来说,入门Web前端开发还是比较容易的,但是仅仅是入门容易,越往后学习内容就越多,所以学习Web前端开发要有一个心里准备,那就是前端开发内容多且更新快。

通常来说,学习Web前端开发需要的基础知识并不多,简单的说需要了解操作系统、计算机网络以及Web的相关知识,由于Web开发本身需要接触更多的网络知识,所以学习Web开发之前可以先了解一下基本的网络连接请求处理过程。

学习Web前端开发可以先从互联网整体结构开始了解,互联网简单的说就是网络的集合,通过交换机、路由器等网络设备把全世界的网络连接到一起,看一个图:

互联网把各种各样的计算机设备连接到了一起的目的是为了能够共同协作,而共同协作的基础就是能够进行数据交换,而数据交换的前提是要有一套完整的通信协议,通讯协议就是制定一个统一的交流标准。

这些基础条件都具备了以后,下一步就是在互联网中设置网络服务,而Web服务则是最为常见的一种网络服务,看一个简单的Web服务过程的图示:

这个图描述了一个非常简单的Web请求处理过程,围绕这个处理过程有几个关键的角色,分别是作为请求端的浏览器、作为服务端的HTML资源、请求对象和回应对象,下面做一个简单的描述。

浏览器是Web前端开发的呈现基础,对于用户来说,浏览器就是一个打开Web服务的窗户,所有的Web服务都通过浏览器呈现给用户。对于前端开发者来说,浏览器就是前端开发内容的运行环境(容器)。

存放在服务端的HTML页面资源就是前端开发人员要开发的主要内容,前端开发就是编写基于HTML的一系列代码,包括CSS、JavaScript等。这部分内容编写好以后要存储在服务器端,然后等待用户的请求。

请求对象就是客户在浏览器端向服务器端发出的服务请求,然后服务器把对应的资源(HTML等)封装成回应对象发送给客户端,然后客户端的浏览器把服务端返回来的资源(HTML)呈现出来,一个请求处理过程就完成了。

这是一个非常简单的描述过程,随着Web前端开发的发展,目前前端开发的方式也产生了较大的变革,前端技术也越来越丰富,框架也越来越多,而且前端开发后端化也是一个趋势,因此前端开发需要一个系统的学习过程。

偶做软件开发多年,目前也在带软件开发团队,偶会陆续在头条写一些关于软件开发方面的文章,感兴趣的朋友可以关注偶,相信一定会有所收获。

如果有软件开发方面的问题,也可以咨询偶。

谢谢!

@ CSS选择器权重如何计算?

很古老的话题了

id=100

class=10

tag(标签)=1

按照这个规律去计算,比如

#qietu div{}

100+1 = 101

.qietu .box{}

10+10=20

可以得出第一个的权重要比第二个要高。另外关于权重的扩展知识面,偶推荐了解下BEM命名规则,这个观念很好,可以从侧面杜绝权重问题的产生,还有一个就是提高权重的方法 !important;

@ 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和style有什么区别?

css是外部样式

style是行内样式

两都的区别css对于后期的修改比较灵活。

有效执行顺序,如果内部写了style样式的话,style为最终执行样式,意思就是style的优先级高于css。

css的流行也在于它很好的做到了结构和样式分离,使得开发者能就通过改变CSS样式来达到改变页面效果的目的。

而Style是内嵌入页面的,维护起来不方便。所以一般的采用引入方式。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。