Vue中scoped屬性相關

2021-10-25 07:20:36 字數 531 閱讀 6770

scoped屬性相關

一般在專案中都會用到,新增了scoped屬性後,vue會通過postcss 給乙個元件中所有的 dom 新增了乙個獨一無二的動態屬性,然後給 css 選擇器額外新增了乙個對應的屬性來選擇該元件中的 dom,這種做法使得樣式只作用於含有該屬性的 dom ——元件內部 dom 。

.title[data-v-e43c18bc]
這樣如果使用了 ant design for vue 或者 element ui 等第三方元件,就會出現 css 設定不起效的問題,無法通過 css 修改元件的樣式。

使用 >>> 可以穿透 scoped 屬性,修改其他第三方元件的樣式

在設定了scoped的情況下,一般可以通過>>>或者/deep/來修改其他第三方元件的樣式。

/deep/ .el-input

css字型屬性相關。

出處 css 參考手冊 說明 這個屬性允許對文字設定某種效果,如加下劃線。如果後代元素沒有自己的裝飾,祖先元素上設定的裝飾會 延伸 到後代元素中。不要求使用者 支援 blink。可能的值 描述 none 預設。定義標準的文字。underline 定義文字下的一條線。overline 定義文字上的一條...

css字型屬性相關。

出處 css 參考手冊 說明 這個屬性允許對文字設定某種效果,如加下劃線。如果後代元素沒有自己的裝飾,祖先元素上設定的裝飾會 延伸 到後代元素中。不要求使用者 支援 blink。可能的值 描述 none 預設。定義標準的文字。underline 定義文字下的一條線。overline 定義文字上的一條...

前端 CSS屬性相關

width 屬性可以為標籤設定寬度 height 屬性可以為標籤設定高度 注意 塊級標籤才能設定寬度,行內標籤的寬度由內容決定 文字型別 font family可以選擇文字的型別 比如 微軟雅黑 宋體 楷體 p字型大小 font size 控制字型大小 p字重 粗細 font weight 用來設定...