https://github.com/mellowco/unocss-class

unocss class 使用示例
https://github.com/mellowco/unocss-class

Last synced: 4 months ago
JSON representation

unocss class 使用示例

• Host: GitHub
• URL: https://github.com/mellowco/unocss-class
• Owner: MellowCo
• Created: 2023-06-16T03:37:24.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-16T03:38:25.000Z (about 3 years ago)
• Last Synced: 2025-10-25T20:52:25.954Z (8 months ago)
• Homepage:
• Size: 6.84 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
## children-[]

> 通过 `children`， 指定目标子元素下的样式

>

> 生成的 css 通过 `>` 分隔符关联

>

> [UnoCSS Playground](https://unocss.dev/play/?html=DwEwlgbgBAxgNgQwM5ILwCIkAcEwKYC0AngQEywAWYcIATngHYEDa4EAugFwBGA5gfRCVqdRiwB0AFwS1eeSVz4FucAK55hNek2aS8AD0kEEcMLwad8DPbXboAfACgoUUJHsBGYAHo2Tl27Q8Mho6NKy8g6kPn7OrrEuAWywiCgY4XKSDgDMMe5xeRD%2BrtgIDCkhGADuBABmqnBwUCoA9jAA1g4ALD6lDE6FTkA&config=JYWwDg9gTgLgBAbwLACg5wCYFMBmwB2WAwhPngOYA0q6YUWAzljAIIwxTABGArjMDgCe1NHDqNmASQDGpBiNr0mMAKr4IIgL5wcUCCDgByHuukMGh1KiwAPSLEy4AhjwA28bHkIkywcgApkUSg3RgAuOABtGnQow2keBhh9AFoQ1yxDSkQ4WVdoCMN6DEM4TQBdGPKFOAYAC2gYBJgGCKDYowSk1PrG5sNCmFsYFNdyOCGbEegnfHIsOAaANywoMMmRoadXS1FNGvFlVqiYxQlVdX8AShqz5TYObj4BQWvbsSUpWXwGQNPYhjSbZYCIARgAdAAmd7oaQYfCFOrsMCtAD0qMYIHB9VRuw6mhuVVQBNQQA&css=Q&options=N4XyA)

1. 所有子元素: `children:bg-red`  `children-[text-align:center]`

2. 指定特定子元素: `children-[div]:bg-red` `children-[.target]-[text-align:center]`

```html



  
1

  
2

  


    
3

  

  4



```


![image-20230616091618689](assets/image-20230616091618689.png)

---

## next-[]

> 通过 `next`, 指定目标相邻元素的样式

>

> 生成的 css 通过 `+` 分隔符关联

>

> [UnoCSS Playground](https://unocss.dev/play/?html=DwEwlgbgBAxgNgQwM5ILwCIkAcEwKYC0AngQExToB8AUFFKJJQIzAD04ENdD08ya6AHZ4AHgBcAXACMA5gSlwArnijDxBANpjRYggjhgZgifkHaATgF0qpNhy717AZjuNajyLEQoMa3RoA6MQRzGTwxS2k5BWUqABZXTnceSgBWRIceL35fHU0gkLCIqPklFT9NDktNbXV9Q2NTC2tKADYM5I5sn3Rg0PCqAHYOjqA&config=JYWwDg9gTgLgBAbwLACg5wCYFMBmwB2WAwhPngOYA0q6YUWAzljAIIwxTABGArjMDgCe1NHDqNmASQDGpBiNr0mMAKr4IIgL5wcUCCDgByHuukMGh1KiwAPSLEy4AhjwA28bHkIkywcgApkUSg3RgAuOABtGnQow2keBhh9AFoQ1yxDSkQ4WVdoCMN6DEM4TQBdGPKFOAYAC2gYBJgGCKDYowSk1PrG5sNCmFsYFNdyOCGbEegnfHIsOAaANywoMMmRoadXS1FNGvFlVqiYxQlVdX8AShqz5TYObj4BQWvbsSUpWXwGQNPYhjSbZYCIARgAdAAmd7oaQYfCFOrsMCtAD0qMYIHB9VRuw6mhuVVQBNQQA&css=Q&options=N4XyA)

1. 相邻元素: `next:bg-blue` `next-[text-align:center]`

2. 特定相邻元素： `next-[.target]:bg-blue`  `next-[div]-[text-align:center]`

```html



  
1

  
2

  
3

  
4

  
5

  
6

  
7



```


![image-20230616094335603](assets/image-20230616094335603.png)