WXSSとは何ですか?
WXSS のスタイルは css に似ており、WXML ページのスタイルを設定するために使用されますが、WXSS は rpx サイズ単位と @import スタイルのインポートを拡張します。
rpx: さまざまな画面に応じて自動的に適応し、デバイス画面の幅を 750 等分に分割します (デバイスの合計幅は 750rpx)
@import: スタイルのインポートに使用されます
インポートを通じてスタイルをインポートする
1. 新しいフォルダー p を作成し、このフォルダーの下に wxss で終わるファイルを作成し、スタイルを定義します
.red{ color: red; }
2.インポートを通じてスタイルをインポートする
@import "/p/p.wxss";
3.wxml参照スタイルを編集する
<view class="red">生于小满，小满为安</view>
グローバル スタイルとローカル スタイル
グローバル スタイル: app.wxss で定義されたスタイルはすべてのページに適用されます
ローカル スタイル: wxss で定義されたスタイル。現在のページに適用されます。
グローバル スタイル:
1. wxml でいくつかのビューを定義します。
<view>哪有自由自在来的逍遥快活</view> <view>哪有自由自在来的逍遥快活</view> <view>哪有自由自在来的逍遥快活</view> <view>哪有自由自在来的逍遥快活</view>
2. app.wxss でビュー スタイルを定義します。
view{ padding: 10rpx; margin: 10rpx; background-color: bisque; border-radius: 10rpx; }Index.wxss にはスタイルを定義していませんが、スタイルが表示されるので、app.wxss のグローバル スタイルが有効になります。
ローカルスタイル:
1.index.wxssでビュースタイルを定義します。
view{ color: teal; }2.index.wxss で定義された部分的なスタイルも有効になる可能性があります
ここで疑問が生じます。グローバル スタイルとローカル スタイルの両方で、ページのビュー スタイルを変更できます。では、どちらの優先順位が高いでしょうか? 次に試してみましょう。
1. ローカル スタイルで 2rpx の赤いエンティティのサイズの境界線を定義します
border: 2rpx solid red;2. グローバル スタイルでサイズ 2rpx の青い実線の境界線を定義します
border: 2rpx solid blue;3. スタイルには赤い枠線が残りますが、グローバル スタイルとローカル スタイルが競合する場合は、最も近い原則に基づいて一致します。
4. 近接原理の一致には条件があります。グローバル スタイルのウェイトはローカル スタイルのウェイトより大きくすることはできません。ビュー上にマウスを置くと、それらのウェイトが表示されます。
現時点では、グローバルとローカルの重みは (0, 0, 1) であるため、近接原理が採用され、重み付けにセレクターを使用します。
view:nth-child(1){ border: 2rpx solid blue; }
グローバル スタイルの現在のウェイトはローカル スタイルのウェイトよりも大きいため、ページに表示される効果は青い枠線に変更されます。
