聊聊Vue3 style中新增了哪些特性（總結）-Vue.js-PHP中文網

Vue3對style樣式進行了升級，以下這篇文章給大家總結分享一下 Vue3 style的新特性，希望對大家有幫助！

Vue3.0後推出的setup函數，像寫JS一樣開發Vue元件，此外style也加入了許多新特性，如引入了變數和函數，使css復用性更強...

style新特性 Vue3.2版本對單一檔案元件的style樣式進行了許多升級，如局部樣式、css變數以及樣式暴露給模板使用等。 （學習影片分享： vue影片教學 ）

#一、局部樣式

##當 標籤有 scoped attribute 的時候，它的CSS 只會應用在目前元件的元素上： hi .example { color: red; } 登入後複製

#二、深度選擇器

處於 scoped 樣式中的選擇器如果想要做更「深度」的選擇，也即：影響子元件，可以使用 :deep() 這個偽類別： .a :deep(.b) { /* ... */ } 登入後複製

透過 v-html 所建立的DOM 內容不會被作用域樣式影響，但你仍然可以使用深度選擇器來設定其樣式。

三、插槽選擇器

預設情況下，作用域樣式不會影響到 渲染出來的內容，因為它們被認為是父元件所持有並傳遞進來的。使用 :slotted 偽類別以確切地將插槽內容作為選擇器的目標： :slotted(div) { color: red; } 登入後複製

4、全域選擇器

如果想讓其中一個樣式規則應用到全域，比起另外創建一個 ，可以使用 :global 偽類來實作： :global(.red) { color: red; } 登入後複製

五、混合使用局部與全域樣式

你也可以在同一個元件中同時包含作用域樣式與非作用域樣式： /* global styles */ /* local styles */ 登入後複製

#六、支援CSS Modules

#&lt ;style module> 標籤會被編譯為 CSS Modules 並且將產生的CSS 類別鍵暴露給元件：

1、 預設以 $style 對象暴露給元件； This should be red

.red { color: red; } 登入後複製

2、可以自訂注入module名稱 red

.red { color: red; } 登入後複製

七、與setup一同使用

注入的類別可以透過 ###useCssModule### API 在 ###setup()### 和 ### ### 中使用：### import { useCssModule } from 'vue' // 默认, 返回 中的类 const defaultStyle = useCssModule() // 命名, 返回 中的类 const classesStyle = useCssModule('classes') 登入後複製 ### #############八、動態CSS############單一檔案元件的 ### ### 標籤可以透過 ###v -bind### 這一CSS 函數將CSS 的值關聯到動態的元件狀態：### const theme = { color: 'red' } hello

p { color: v-bind('theme.color'); } 登入後複製 ###（完） ###

（學習影片分享： web前端開發 、 程式設計基礎影片 ）