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=“这里写要用的类名等”
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue组件实现移动端九宫格转盘抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
Vue3中Composition API和Options API的区别
Vue3的Composition API和Options API是Vue.js框架中的两种不同的API，本文主要介绍了Vue3中Composition API和Options API的区别，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了vue如何监听el-select选择值的变化，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue element upload组件 file-list的动态绑定实现
这篇文章主要介绍了vue element upload组件 file-list的动态绑定实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了vue3+vite动态加载路由,本地路由和线上路由匹配方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章介绍了vue项目环境搭建的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家详细介绍了Vue封装组件并上传到npm的相关教程,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2024-04-04
这篇文章主要介绍了Vue关于数据绑定出错解决办法的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了vue脚手架及vue-router基本使用，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
Vue3使用transition组件改变DOM属性的方式小结
这篇文章主要为大家详细介绍了Vue3中使用transition组件改变DOM属性的常用方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
最新评论