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文件
作用：
便于管理共同樣式，可以在項目任意一處引入該樣式，便于區(qū)分引入的樣式庫
全局css內容在這里插入圖片描述，寫入共同使用的樣式，在這里也可以使用媒體查詢
css樣式在main.js文件中引入
要使用該樣式的vue文件中引入
使用的時候在
class=“這里寫要用的類名等”
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
如何用vue3+Element?plus實現(xiàn)一個完整登錄功能
要實現(xiàn)用戶的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關于如何基于Vue3和Element?Plus組件庫實現(xiàn)一個完整的登錄功能,文中提供了詳細的代碼示例,需要的朋友可以參考下2023-10-10
Vue web前端三大主流框架之一,是一套用于構建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關于Vue安裝與配置教程的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-06-06
vue3+ts+echarts實現(xiàn)按需引入和類型界定方式
這篇文章主要介紹了vue3+ts+echarts實現(xiàn)按需引入和類型界定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)同時設置多個倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue 組件中添加樣式不生效的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了VUE 打包后相對路徑的引用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
虛擬DOM的概念是通過狀態(tài)生成一個虛擬節(jié)點樹，然后使用虛擬節(jié)點樹進行渲染。在渲染之前，會使用新生成的虛擬節(jié)點和上一次生成的虛擬節(jié)點進行對比，只渲染不同的部分2022-08-08
這篇文章主要給大家介紹了關于Vue項目啟動報錯解決方法的相關資料,文中通過圖文將解決的過程介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了詳解vue-meta如何讓你更優(yōu)雅的管理頭部標簽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01