WXSS中的常用属性、选择器;
时间: 2024-06-06 10:06:32 浏览: 37
WXSS中的常用属性包括:
1. font-size:设置字体大小
2. color:设置字体颜色
3. background-color:设置背景颜色
4. border:设置边框
5. padding:设置内边距
6. margin:设置外边距
7. display:设置元素的显示方式
8. position:设置元素的定位方式
9. width:设置元素的宽度
10. height:设置元素的高度
WXSS中的常用选择器包括:
1. .class:选择类名为class的元素
2. #id:选择id为id的元素
3. element:选择元素名为element的元素
4. element.class:选择元素名为element且类名为class的元素
5. element#id:选择元素名为element且id为id的元素
6. element1 element2:选择元素名为element1内部的元素名为element2的元素
7. element1 > element2:选择元素名为element1直接子元素中的元素名为element2的元素
8. :hover:选择鼠标悬停在元素上的状态
9. :active:选择鼠标点击元素时的状态
10. :nth-child(n):选择第n个子元素
相关问题
WXSS样式一般由选择器和声明两部分组成。
是的,WXSS样式由选择器和声明两部分组成。选择器用于选中需要应用样式的元素,而声明则用于定义需要应用的样式。例如,以下代码中,选择器为class为"container"的元素,声明了背景颜色为红色:
```
.container {
background-color: red;
}
```
在应用样式时,选中class为"container"的元素会应用声明中定义的样式,即背景颜色会变成红色。
wxss文件中配置的样式显示
在小程序中,wxss文件中配置的样式会被应用到对应的组件上,如:
1. 配置页面样式:
```css
/* app.wxss */
.page {
background-color: #f0f0f0;
font-size: 16px;
}
```
2. 配置组件样式:
```css
/* component.wxml */
/* component.wxss */
.custom-component {
color: #333;
font-size: 18px;
}
```
在页面或其他组件中使用该组件时,会应用该组件所定义的样式:
```html
<!-- page.wxml -->
<view class="page">
<custom-component class="custom-component">Hello, World!</custom-component>
</view>
```
此时,页面背景色为#f0f0f0,字体大小为16px,而自定义组件的文字颜色为#333,字体大小为18px。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)