大家好，今天依然為大家帶來鴻蒙跨平臺開發教程的分享，我們本系列的教程最終要做一個購物應用，通過這個項目為大家分享uniapp開發鴻蒙應用從配置開發環境到應用打包上架的完成過程。

昨天的文章實現了應用首頁的輪播圖，其中涉及到為輪播圖設置樣式，放一小段代碼帶大家回顧一下：

.swiper-item{width: 100%;height: 100%;display: block;text-align: center;
}

對于有css基礎的同學來說這段代碼很簡單，但是對于初學者同學來說可能會不是很明白，今天幽藍君就為大家分享一下uniapp開發鴻蒙時的樣式選擇器。

所謂樣式選擇器，就是為組件設置樣式，比如背景色、大小、間距等等，ArkTs中也有這些樣式，甚至名字都差不多，只是在語法上差別較大，而且uniapp中的選擇器種類甚多，下面為大家一一講解。我們以設置文字的顏色為例：

類選擇器

這第一個選擇器就是上面的代碼中的樣式，是由.+名字組成，它修改的是class為對應名字的組件，例如：

<text class="text1">類選擇器</text>.text1{color: red;
}

這樣對應組件中的文字就會被設置為紅色。

ID選擇器

和類選擇器略有不同，ID選擇器由#+名字組成，修改的是對應id的組件：

<text id="text2">ID選擇器</text>#text2{color: green;
}

屬性選擇器

屬性選擇器比較簡單粗暴，如果你在定義樣式時直接寫組件名字，那么該組件的樣式會全部被修改：

<text>屬性選擇器</text>text{color: gray;
}

內聯選擇器

不知大家有沒有注意到，關于樣式還有一種直接在組件中寫style的方式，這種方式叫做內聯選擇器：

<text style="color: orange;">內聯選擇器</text>

后代選擇器

這種方式是在屬性選擇器的基礎上，如果你在使用屬性選擇器時寫了兩個名字，比如 ：

view text{
}

這樣的樣式將在view容器內的text組件中生效。

關于選擇器的種類還有很多，這里就不再一一列舉，常見的選擇器基本就是上面這么多。

下面說一說優先級的問題。大家可能經常見過內聯選擇器和其他選擇器同時出現，比如：

<text class="text1" style="color: orange;">選擇器優先級</text>.text1{color: red;
}

兩個選擇器都設置了文字的顏色，那么誰的優先級更高呢，答案是內聯選擇器優先級更高。不光是和類選擇器相比，上面我們介紹的所有的選擇器中都是內聯選擇器的優先級更高。

但是它不是優先級最高的。如果我的類選擇器、ID選擇器中的樣式不想被內聯選擇器覆蓋呢？可以在樣式后添加!important，像這樣：

text{color: gray !important;
}

在所有的選擇器中，!important的優先級是最高的，也提醒大家一定要慎重使用它，它雖然好用但是缺點更多，能不用則不用。

以上就是對選擇器的一些介紹，感謝大家閱讀。

#鴻蒙三方框架##Uniapp##購物#