Vue如何设置全局css文件以及css组合器
更新时间：2024年06月19日 16:20:56 作者：佛系努力中……
这篇文章主要介绍了Vue如何设置全局css文件以及css组合器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue设置全局css文件及css组合器
vue设置全局css只要在main.js里引入css文件即可，如：
import '@/assets/style.css'; // 全局css
记录一下自己常常记混的几个选择器
- 组群选择器(,)
//分组选择器选取所有具有相同样式定义的 HTML 元素。
h1, h2, p {
text-align: center;
color: red;
}- 后代选择器 (空格)
//下面的例子选择 <div> 元素内的所有 <p> 元素：
div p {
background-color: yellow;
}- 子选择器 (>)
//下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：
div > p {
background-color: yellow;
}- 相邻兄弟选择器 (+)
/*相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：*/
div + p {
background-color: yellow;
}- 通用兄弟选择器(~)
/*通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：*/
div ~ p {
background-color: yellow;
}Vue定义全局css文件
作用：
便于管理共同样式，可以在项目任意一处引入该样式，便于区分引入的样式库
全局css内容在这里插入图片描述，写入共同使用的样式，在这里也可以使用媒体查询
css样式在main.js文件中引入
要使用该样式的vue文件中引入
使用的时候在
class=“这里写要用的类名等”
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
如何用vue3+Element plus实现一个完整登录功能
要实现用户的登录功能,可以使用Vue3和Element Plus,下面这篇文章主要给大家介绍了关于如何基于Vue3和Element Plus组件库实现一个完整的登录功能,文中提供了详细的代码示例,需要的朋友可以参考下2023-10-10
Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue3+ts+echarts实现按需引入和类型界定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本篇文章主要介绍了VUE中v-model和v-for指令详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了vue 组件中添加样式不生效的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了VUE 打包后相对路径的引用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
虚拟DOM的概念是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分2022-08-08
这篇文章主要给大家介绍了关于Vue项目启动报错解决方法的相关资料,文中通过图文将解决的过程介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了详解vue-meta如何让你更优雅的管理头部标签，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论