主要記錄自極客學院微信小程式學習視訊

一、樣式的基本使用

<view class="text">
	jekexueyuan ....
</view>

.text {
	font-size: 20px;
}

二、樣式的屬性

2.1 尺寸

width : 228rpx;
height : 228rpx;

/**
min-width:
max-width:
min-height:
max-height:
**/

2.2 背景

background-color:  //背景顏色
background-image: //背景圖片
background-position:
...
 

2.3 邊框

border-radius: 20%; //邊框圓角
border-width：10px;
border-color: #ddd;
border-style: solid;
border: 10px solid #ddd;

2.4 邊距

margin: 20rpx;
margin-top: 20rpx;
margin-right: 20rpx;
padding: 20rpx;
margin: 20rpx 20rpx 20rpx 20rpx; //上 右 下 左
...

2.5 文字

color: red;//顏色
font-size: 30px;
font-weight: 10;
...

2.6 其他（列表、內容、表格…）

檢視文件學習

三、樣式選擇器

3.1 基本選擇器

3.1.1 類選擇器 （.name{}）

class 與 .

//.wxml
<text class="nickname"> </text>

//.wxss
.nickname{
	width:228rpx;
	height:228rpx;
}

3.1.2 ID選擇器 （#name{}）

id 與 #

//.wxml
<text id="nickname"> </text>

//.wxss
#nickname{
	width:228rpx;
	height:228rpx;
}

3.1.3 元素選擇器 （name{}）

name 為元素名稱

//.wxss
//表示對所有的image元素都顯示以下樣式
image{
	width:228rpx;
	height:228rpx;
}

3.1.4 萬用字元選擇器 （*{}）

//.wxss
//表示對所有元素都顯示以下樣式
*{
	background-color: red;
}   

3.1.5 包含選擇器 （p c{}）

//.wxml
<view>
	<view class="userinfo">
		<text id="nickname"> </text>  
	</view>
	<view class="usermotto">
		<text id="name"> </text> 
	</view>
</view>

//.wxss
<!-- 僅 userinfo 下的text元素有效，usermotto下的text元素無效 -->
.userinfo text{
	color:red;
}

3.1.6 子元素選擇器 （p > c{}）

//.wxml
<view class="usermotto">
	<view>
		<text id="nickname"> </text>  
	</view>
	<text id="name"> </text>  
</view>

//.wxss
<!-- 能影響到nickname 和 name 兩個text 元素 -->
.usermotto text{
	color:red;
}

/**
只能影響到 name text元素，不能影響到 nickname 元素；
也即是隻能影響到p（父view）下一層級的c（子view），
而不能影響到子View 的 子View
**/
.usermotto>text{
	color:red;
}

3.1.7 鄰近兄弟元素選擇器 （c + c{}）

//.wxml
<view>
	<view class="userinfo">
		<text id="nickname"> </text>  
	</view>
	
	//以下為 userinfo 臨近的 view
	<view>
		<text id="name"> </text> 
	</view>
</view>

//.wxss
<!-- 讓臨近的元素具有以下屬性 -->
.userinfo + view{
	color:red;
}

3.1.8 通用兄弟元素選擇器 （c ~ c{}）

3.2 屬性選擇器

3.2.1 E[attr]

只要某類元素 E 有該屬性 attr ，不管該屬性的值是什麼，都會使用該樣式

//.wxml
<view>
	<!-- 以下view 具有 bindtap 屬性，該屬性的值為 bindViewTap -->
	<view bindtap="bindViewTap" class="userinfo">
		<text id="nickname"> </text>  
	</view>
</view>

//.wxss
view[bindtap]{
	color:red;
}

//多個屬性可以繼續往後面加
view[bindtap][bindtap]{
	background-color:red;
}

3.2.2 E[attr="value"]

只要某類元素 E 有該屬性 attr ，且該屬性的值等於 value ，都會使用該樣式

3.2.3 E[attr~="value"]

某類元素 E 有該屬性 attr ，只要該屬性的值中有一個值等於 value ，都會使用該樣式

//.wxml
<view>
	<!-- 以下view 具有 class 屬性，該屬性的值有兩個 userinfo   和 item -->
	<view bindtap="bindViewTap" class="userinfo   item">
		<text id="nickname"> </text>  
	</view>
</view>

//.wxss
view[class~="userinfo"]{
	background-color: red;
}

3.2.4 E[attr|="value"]

某類元素 E 有該屬性 attr ，只要該屬性的值以 value- 開頭 ，都會使用該樣式

//.wxml
<view>
	<!-- 以下view 具有 class 屬性，該屬性的值為 userinfo-item ,以 userinfo-  開頭   -->
	<view bindtap="bindViewTap" class="userinfo-item">
		<text id="nickname"> </text>  
	</view>
</view>

//.wxss
view[class|="userinfo"]{
	background-color: red;
}

3.2.5 E[attr^="value"]

某類元素 E 有該屬性 attr ，該屬性的值必須以 value 開頭 ，才會使用該樣式

3.2.6 E[attr$="value"]

某類元素 E 有該屬性 attr ，該屬性的值必須以 value 結束 ，才會使用該樣式

3.2.7 E[attr*="value"]

某類元素 E 有該屬性 attr ，該屬性的值包含 value ，都會使用該樣式

3.3 偽類選擇器

3.3.1 動態偽類選擇器 （:link, : visited, :hover , :active , :focus）

:focus 表示元素獲得焦點的時候觸發 :active 表示元素被啟用的時候觸發，如被點選

//圖片頭像應用了以下 ID 選擇器
#userinfo-avatar{
	width: 228rpx;
	height: 228rpx;
	background-color: seagreen;
	border: 1px solid #ddd
	padding:10px;
}

//加了 :active ,表示影象被點選的時候會顯示的樣式
#userinfo-avatar:active{
	width: 128rpx;
	height: 128rpx;
	background-color: red;
	border: 1px solid #ddd
	padding:10px;
}

以下是未啟用狀態顯示樣式：綠色背景色 點選啟用後顯示如下：圖片變小且背景色變為紅色

3.3.2 狀態偽類選擇器 （:enabled , : disabled , :checked）

描述控制元件的狀態， :enabled : 啟用狀態 :disabled : 禁用狀態 :checked : 選中狀態

3.3.3 選擇偽類選擇器 （:first-child, : last-child , :nth-child() , :nth-last-child() , : nth-of-type(), :nth-last-of-type(), :first-of-type , :last-of-type , :only-child , :only-of-type）

//.wxml  
//有三張圖片
<view>
	<image class="userinfo-avatar ">
	<image class="userinfo-avatar ">
	<image class="userinfo-avatar ">
</view>

//.wxss
.userinfo-avatar{
	width: 228rpx;
	height: 228rpx;
	background-color: seagreen;
	border: 1px solid #ddd
	padding:10px;
}

//:first-child 表示僅第一張圖片應用以下屬性，其餘圖片應用上面的屬性
.userinfo-avatar:first-child{
	width: 128rpx;
	height: 128rpx;
	background-color: red;
	border: 1px solid #ddd
	padding:10px;
}

3.3.4 空內容偽類選擇器 （:empty）

3.3.5 否定偽類選擇器 （:not）

3.3.6 偽元素 （::first-line , ::first-letter , ::before , ::after , ::selection）

::first-letter :第一個字母顯示樣式

//.wxml  
<view class="usermotto">
	<text class="text1">Hello World</text>
</view>

//.wxss
.usermotto::first-letter{
	color: red;
	font-size:30px;
}