什么是WXSS?
? ? WXSS中的樣式和css差不多，是用于給WXML頁面來設(shè)置樣式的，但是WXSS中擴(kuò)展了rpx尺寸單位和@import樣式導(dǎo)入
? ?rpx:根據(jù)不同的屏幕自動進(jìn)行適配，把設(shè)備屏幕的寬度等分為750份(設(shè)備的總寬度750rpx)
? @import: 用于進(jìn)行樣式的導(dǎo)入
通過inport來實(shí)現(xiàn)樣式的導(dǎo)入
? 1.新建一個文件夾p，在這個文件夾下建一個以wxss結(jié)尾的文件，定義一個樣式
.red{ color: red; }
?2.通過import導(dǎo)入樣式
@import "/p/p.wxss";
?3.編輯wxml引用樣式
<view class="red">生于小滿，小滿為安</view>
全局樣式和局部樣式
? ? ? ? ? ? ? ? 全局樣式： 在app.wxss中定義的樣式，會作用于所有的頁面
? ? ? ? ? ? ? ? 局部樣式： 在wxss中定義的樣式，作用于當(dāng)前頁面
全局樣式：
? 1.在wxml中隨便定義幾個view
<view>哪有自由自在來的逍遙快活</view> <view>哪有自由自在來的逍遙快活</view> <view>哪有自由自在來的逍遙快活</view> <view>哪有自由自在來的逍遙快活</view>
2.在app.wxss中定義view的樣式
view{ padding: 10rpx; margin: 10rpx; background-color: bisque; border-radius: 10rpx; }? ? ? 我們沒有在index.wxss中定義任何樣式但是卻可以看到樣式，這就是app.wxss中的全局樣式生效了
?局部樣式：
1.在index.wxss中定義view的樣式
view{ color: teal; }2.在index.wxss中定義的局部樣式也可以生效
? ?那么問題來了，全局樣式和局部樣式都可以對我們頁面中的view樣式進(jìn)行修改，那么他們的優(yōu)先級誰更高呢，接下里我們就試試
1.在局部樣式中定義一個大小為2rpx紅色實(shí)體的邊框
border: 2rpx solid red;2.在全局樣式中定義一個大小為2rpx的藍(lán)色實(shí)體邊框
border: 2rpx solid blue;3.樣式還是紅色的邊框，當(dāng)全局樣式和局部樣式發(fā)生沖突時，會依據(jù)就近原則來進(jìn)行匹配
?4.進(jìn)行就近原則匹配時需要一個條件，全局樣式的權(quán)重不能比局部樣式的權(quán)重大，當(dāng)我們把鼠標(biāo)放到view上時可以看到它們的權(quán)重
?
?文章來源地址http://www.zghlxwxcb.cn/news/detail-662598.html
? 目前全局和局部的權(quán)重都為（ 0，0，1） ，所以就采用了就近原則，那么我們使用選擇器來進(jìn)行加權(quán)
view:nth-child(1){ border: 2rpx solid blue; }
? ? 當(dāng)前全局樣式的權(quán)重要比局部樣式的權(quán)重大，所以我們頁面展示的效果就改為了藍(lán)色邊框
文章來源：http://www.zghlxwxcb.cn/news/detail-662598.html
?
到了這里，關(guān)于WXSS的全局樣式和局部樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
