uniapp块级级联给个例子

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、H5、以及各种小程序等多个平台。在 uni-app 中，我们可以使用 CSS 的级联特性来组织样式。块级级联是 CSS 中的一个概念，它允许一个选择器影响多个元素的样式。

举个例子，假设我们要为一个列表中的每个列表项设置不同的样式，我们可以创建一个通用的类，然后为每个列表项添加一个额外的类来指定具体的样式。以下是一个简单的例子：

/* 定义一个通用的列表项样式 */
.list-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

/* 定义第一个列表项的特定样式 */
.list-item-first {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/* 定义最后一个列表项的特定样式 */
.list-item-last {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* 定义当前活动列表项的特定样式 */
.list-item-active {
  background-color: #007aff;
  color: white;
}

然后在 HTML 中使用这些类：

<view class="list">
  <view class="list-item list-item-first">项目一</view>
  <view class="list-item">项目二</view>
  <view class="list-item list-item-active">项目三</view>
  <view class="list-item list-item-last">项目四</view>
</view>

在这个例子中，所有的列表项都会应用 `.list-item` 的样式，但同时每个列表项还会根据它们特定的类（`.list-item-first`、`.list-item-last` 或 `.list-item-active`）应用额外的样式。这样，我们就可以对列表中的每个元素进行个性化的样式设置，同时保持代码的复用性和可维护性。