小程序wxss进阶

选择器

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

• before ，after

before为控件前面插入内容，after为控件后面插入内容

::before和::after匹配一个伪元素，主要被用于为当前元素增加装饰性内容，默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容，设置before和after时必须设置其content属性，否则伪元素就不起作用。

before和after并不是节点，不会出现在dom树中，但是在显示上具备节点的效果

.view_1 {
  font-size: 70rpx;
  color: red;
}
/* 在view_1控件之前 */
.view_1::before {
  content: "苹果：¥ ";
  font-size: 40rpx;
  color: black;
}
/* 在view_1控件之后 */
.view_1::after {
  content: " 元/斤";
  font-size: 30rpx;
  color: gray;
}

<view class="view_1">500</view>

实际效果：

使用after给button控件加边框：

button::after {
  border-radius: 20rpx;
  border: 5rpx solid red;
}

• class+空格+控件（image）

.view_1{
	width: 100%;
    height: 100%;
}
.view_1 image {
    width: 90rpx;
    height: 90rpx;
}

<view class='view_1'>
	<image src='../../images/1.png'/>
</view>

.view_1 image表示view_1视图中的所有image控件

如果是.view_1 .image则表示view_1视图中的class为image的控件

• @import

app.wxss是全局样式，作用于每一个页面，而page下的每一个的wxss文件只作用于当前页面，如果要引入第三方的wxss样式，比如weui.wxss或者自定义的wxss，可以在目标wxss中用@import

@import '../../weui.wxss';
@import '../../utils/orderui.wxss';

• nth-child/nth-of-type

nth-of-type：选取同类型的，例如nth-of-type(odd)就是选取同类型的奇数标签 
nth-child：选取同一元素下所有兄弟节点的，例如nth-child(odd)，会计算其他标签在内的。

nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

nth-child(odd)：选取奇数控件

nth-child(even)：选取偶数控件

nth-child(3n+1)：每隔3个控件+偏移量1

.view_1 {
  width: 200rpx;
  height:200rpx;
  margin: 10rpx;
  background: green;
}
/* 第三个控件 */
.view_1:nth-child(3) {
  background: yellow;
}
/* 或者 */
.view_1:nth-of-type(3) {
  background: yellow;
}

实际效果：

.view_2 {
  width: 200rpx;
  height:200rpx;
  margin: 10rpx;
  background: green;
}
/* 每隔三个控件 */
.view_2:nth-child(3n) {
  background: yellow;
}
/* 或者 */
.view_2:nth-of-type(3n) {
  background: yellow;
}

实际效果：

.view_3 {
  width: 200rpx;
  height:200rpx;
  margin: 20rpx;
  background: green;
}
/* 最后一个控件 */
.view_3:last-child {
  background: blue;
}

实际效果：