小程序WXSS样式选择器

WXSS（WeiXin Style Sheets）语法

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式

WXSS 用来决定 WXML 的组件应该怎么显示。

WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS相比，它的扩展特性有：

尺寸单位

样式导入

样式选择器

.class	.container	选择所有class="container"的组件
#id	#id	选择id="#id"的组件
element	view	选择所有view组件
element, element	view, text	选择所有view组件和所有text组件
::after	view::after	在view组件内的后面插入内容
::before	view::before	在view组件内的前面插入内容

选择器使用演示

元素选择器:

view {
  margin: 20rpx;
}

类选择器：

.container {
  margin: 20px;
}

after选择器:

view::after {
  content: "测试";
}

例：

<view> 跨境小助手 </view>

view {
  color:blue;
}
view::after {
  content:"外贸业务员的好帮手";
  color:blue
}

后代选择器

使用空格表示后代选择器，又称为包含选择器。用于选择元素内部的元素(包括儿子,孙子,重孙子等)，称为其后代。

使用格式：

element1 element2 {
    样式规则1;
    样式规则2;
    ...
}

仅对包含在指定父元素内符合条件的子元素有效。

<view class="good">
    <view>
        <text>Hello World</text>
    </view>
    <text>你好，世界</text>
</view>

.good text{
  background-color:yellow;
}
.good > text{
  font-size:80rpx;
}

子代选择器

使用>表示子代选择器，也称子元素选择器。与后代选择器相比，子元素选择器只能选择作为某元素直接子元素的元素。如果在指定页面元素的时候，我们不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，就可以使用子代选择器。

使用格式：

element1>element2 {
    样式规则1;
    样式规则2;
    ...
}

如果要对父元素标记内包含的某种特定子标记定义样式，可使用子代选择器。
与包含选择符不同的是，子对象选择符只对父元素内一级子元素定义样式

<view class="good">
    <view>
        <text>Hello World</text>
    </view>
    <text>你好，世界</text>
</view>

.good text{
  background-color:yellow;
}
.good > text{
  font-size:80rpx;
}

样式引用类型

内联样式

直接写在WXML框架组件上，

框架组件上支持使用 style、class 属性来控制组件的样式。

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

外部样式

写在WXML同级的WXSS上。

例子1

一个简单的例子：

例子2

WXSS样式：

/* pages/yes/yes.wxss */
.avatar{
  width:274rpx;
  height:271rpx;
  margin-top:160rpx;
}

WXML：

<image class="avatar" src="/images/2.png"></image>
<text>Hello ,大家好 ！</text>
<button>开启小程序之旅</button>

样式导入

导入外部样式：

@import "test.wxss";

全局样式

也可以在app.wxss中设置样式，

这样所有页面都会遵循：

text{
  color:#666;
}