Vue如何設(shè)置全局css文件以及css組合器
更新時(shí)間：2024年06月19日 16:20:56 作者：佛系努力中……
這篇文章主要介紹了Vue如何設(shè)置全局css文件以及css組合器問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue設(shè)置全局css文件及css組合器
vue設(shè)置全局css只要在main.js里引入css文件即可，如：
import '@/assets/style.css'; // 全局css
記錄一下自己常常記混的幾個(gè)選擇器
- 組群選擇器(,)
//分組選擇器選取所有具有相同樣式定義的 HTML 元素。
h1, h2, p {
text-align: center;
color: red;
}- 后代選擇器 (空格)
//下面的例子選擇 <div> 元素內(nèi)的所有 <p> 元素：
div p {
background-color: yellow;
}- 子選擇器 (>)
//下面的例子選擇屬于 <div> 元素子元素的所有 <p> 元素：
div > p {
background-color: yellow;
}- 相鄰兄弟選擇器 (+)
/*相鄰兄弟選擇器匹配所有作為指定元素的相鄰?fù)?jí)的元素。
兄弟（同級(jí)）元素必須具有相同的父元素，“相鄰”的意思是“緊隨其后”。
下面的例子選擇緊隨 <div> 元素之后的所有 <p> 元素：*/
div + p {
background-color: yellow;
}- 通用兄弟選擇器(~)
/*通用兄弟選擇器匹配屬于指定元素的同級(jí)元素的所有元素。
下面的例子選擇屬于 <div> 元素的同級(jí)元素的所有 <p> 元素：*/
div ~ p {
background-color: yellow;
}Vue定義全局css文件
作用：
便于管理共同樣式，可以在項(xiàng)目任意一處引入該樣式，便于區(qū)分引入的樣式庫(kù)
全局css內(nèi)容在這里插入圖片描述，寫入共同使用的樣式，在這里也可以使用媒體查詢
css樣式在main.js文件中引入
要使用該樣式的vue文件中引入
使用的時(shí)候在
class=“這里寫要用的類名等”
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何用vue3+Element?plus實(shí)現(xiàn)一個(gè)完整登錄功能
要實(shí)現(xiàn)用戶的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3和Element?Plus組件庫(kù)實(shí)現(xiàn)一個(gè)完整的登錄功能,文中提供了詳細(xì)的代碼示例,需要的朋友可以參考下2023-10-10
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與配置教程的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue3+ts+echarts實(shí)現(xiàn)按需引入和類型界定方式
這篇文章主要介紹了vue3+ts+echarts實(shí)現(xiàn)按需引入和類型界定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-06-06
vue實(shí)現(xiàn)同時(shí)設(shè)置多個(gè)倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)同時(shí)設(shè)置多個(gè)倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue 組件中添加樣式不生效的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-07-07
這篇文章主要介紹了VUE 打包后相對(duì)路徑的引用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
虛擬DOM的概念是通過狀態(tài)生成一個(gè)虛擬節(jié)點(diǎn)樹，然后使用虛擬節(jié)點(diǎn)樹進(jìn)行渲染。在渲染之前，會(huì)使用新生成的虛擬節(jié)點(diǎn)和上一次生成的虛擬節(jié)點(diǎn)進(jìn)行對(duì)比，只渲染不同的部分2022-08-08
Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法大全
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法的相關(guān)資料,文中通過圖文將解決的過程介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽
這篇文章主要介紹了詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-01-01