查看“小程序WXSS样式选择器”的源代码

==WXSS（WeiXin Style Sheets）语法==

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

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

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

*尺寸单位

*样式导入

==样式选择器==

 <nowiki>
.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组件内的前面插入内容</nowiki>

===选择器使用演示===
元素选择器:

 <nowiki>view {
  margin: 20rpx;
}</nowiki>

类选择器：

 <nowiki>
.container {
  margin: 20px;
}
</nowiki>

::after选择器:

 <nowiki>view::after {
  content: "测试";
}</nowiki>

例：

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

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

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

使用格式：

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


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

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

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




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

使用格式：

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

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

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

 <nowiki>.good text{
  background-color:yellow;
}
.good > text{
  font-size:80rpx;
}</nowiki>
==样式引用类型==
===内联样式===
直接写在WXML框架组件上，

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

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

<nowiki><view style="color:{{color}};" /></nowiki>

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

<nowiki><view class="normal_view" /></nowiki>



===外部样式===
写在WXML同级的WXSS上。

====例子1====
一个简单的例子：

[[文件:wx2-22.png]]

[[文件:wx2-23.png]]

====例子2====
WXSS样式：

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

WXML：

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

===样式导入===
导入外部样式：

 <nowiki>@import "test.wxss";</nowiki>

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

这样所有页面都会遵循：

 <nowiki>text{
  color:#666;
}</nowiki>