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ū)分引入的樣式庫
全局css內(nèi)容在這里插入圖片描述，寫入共同使用的樣式，在這里也可以使用媒體查詢
css樣式在main.js文件中引入
要使用該樣式的vue文件中引入
使用的時(shí)候在
class=“這里寫要用的類名等”
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue組件實(shí)現(xiàn)移動(dòng)端九宮格轉(zhuǎn)盤抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)移動(dòng)端九宮格轉(zhuǎn)盤抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
Vue3中Composition?API和Options?API的區(qū)別
Vue3的Composition API和Options API是Vue.js框架中的兩種不同的API，本文主要介紹了Vue3中Composition?API和Options?API的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要介紹了vue如何監(jiān)聽el-select選擇值的變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue element upload組件 file-list的動(dòng)態(tài)綁定實(shí)現(xiàn)
這篇文章主要介紹了vue element upload組件 file-list的動(dòng)態(tài)綁定實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue3+vite動(dòng)態(tài)加載路由,本地路由和線上路由匹配方式
這篇文章主要介紹了vue3+vite動(dòng)態(tài)加載路由,本地路由和線上路由匹配方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章介紹了vue項(xiàng)目環(huán)境搭建的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue封裝組件并上傳到npm的相關(guān)教程,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-04-04
Vue關(guān)于數(shù)據(jù)綁定出錯(cuò)解決辦法
這篇文章主要介紹了Vue關(guān)于數(shù)據(jù)綁定出錯(cuò)解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue腳手架及vue-router基本使用，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
Vue3使用transition組件改變DOM屬性的方式小結(jié)
這篇文章主要為大家詳細(xì)介紹了Vue3中使用transition組件改變DOM屬性的常用方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01