文章目录
要解决这个问题，你需要确保
.special-label 的样式优先级高于
.param-title 的默认样式。你可以通过以下几种方法来实现：
1. 使用更高优先级的选择器
你可以通过使用更高优先级的选择器来覆盖默认样式。例如：
.param-title.special-label {
width: 50rpx;
}
这样会确保 .special-label 的样式优先级高于 .param-title。
2. 使用 !important
你可以使用 !important 来强制覆盖默认样式。例如：
.special-label {
width: 50rpx !important;
}
修改后的 CSS 文件
以下是修改后的 CSS 文件，应用了更高优先级的选择器：
/* 新增样式 */
.param-title.special-label {
width: 50rpx;
}
.logistics-param-wrap {
width: 100%;
padding: 40rpx 20rpx;
}
.logistics-param-title {
width: 100%;
font-size: 28rpx;
color: #161616;
}
.logistics-param-box {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.param-item-box {
width: 33.333%;
font-size: 20rpx;
display: flex;
margin-top: 24rpx;
}
.param-title,
.param-image-title {
width: 140rpx;
color: #5B5E65;
}
.param-value,
.param-image-value {
width: calc(100 - 140rpx);
color: #000;
}
.logistics-image-param-box {
width: 100%;
}
.param-image-item-box {
width: 100%;
margin-top: 24rpx;
display: flex;
font-size: 20rpx;
}
.param-image {
width: 120rpx;
height: 120rpx;
background: #D9D9D9;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.param-image {
width: 120rpx;
height: 120rpx;
}
修改 WXML 文件
确保在 wxml 文件中正确应用了 special-label 类：
<view class="logistics-param-wrap">
<view class="logistics-param-title">
物流参数
</view>
<view class="logistics-param-box">
<view class="param-item-box" wx:for="{{ list }}" wx:key="key">
<view class="param-title {{ item.key === 'boxCode' ? 'special-label' : '' }}">{{ item.label }}</view>
<view class="param-value {{ item.key === 'boxCode' ? 'special-key' : '' }}">{{ detail[item.key] || '/' }}</view>
</view>
</view>
<view class="logistics-image-param-box">
<view class="param-image-item-box">
<view class="param-image-title">外箱样式图</view>
<view class="param-image-value">
<image class="param-image" wx:for="{{ detail.boxStyleImageList }}" wx:key="name" src="{{ oss + item.thumbnail }}" data-item="{{ item }}" catch:tap="handlePreview" />
</view>
</view>
</view>
<view class="logistics-param-box">
<view class="param-item-box" wx:for="{{ list2 }}" wx:key="key">
<view class="param-title {{ item.key === 'middleBoxCode' ? 'special-label' : '' }}">{{ item.label }}</view>
<view class="param-value {{ item.key === 'middleBoxCode' ? 'special-key' : '' }}">{{ detail[item.key] || '/' }}</view>
</view>
</view>
<view class="logistics-image-param-box">
<view class="param-image-item-box">
<view class="param-image-title">中箱样式图</view>
<view class="param-image-value">
<image class="param-image" wx:for="{{ detail.middleBoxStyleImageList }}" wx:key="name" src="{{ oss + item.thumbnail }}" data-item="{{ item }}" catch:tap="handlePreview" />
</view>
</view>
</view>
</view>
通过这些修改，你可以确保 .special-label 的样式优先级高于 .param-title，从而使 width: 50rpx 生效。
1、复合选择器
.param-title.special-label 是一种 复合选择器，它结合了类选择器和类选择器，属于 类选择器 优先级范畴。
详细解析:
.param-title: 这是一个 类选择器，它会选中所有具有param-title类名的 HTML 元素。.special-label: 这也是一个 类选择器，它会选中所有具有special-label类名的 HTML 元素。- .param-title.special-label: 这是一个 复合选择器，或者称为组合选择器。它会同时选中 既具有
param-title类名又具有special-label类名 的 HTML 元素。
优先级:
根据 CSS 选择器的优先级规则，param-title.special-label 属于 类选择器 的范畴，其优先级高于类型选择器（例如 div、p）但低于 ID 选择器（例如 #id）。
优先级计算（权值）：
.param-title: 10.special-label: 10- .param-title.special-label: 10 + 10 = 20
举例说明:
<view class="param-title"> 普通标签 </view>
<view class="param-title special-label"> 特殊标签 </view>
.param-title {
color: #000; /* 普通标签颜色为黑色 */
}
.special-label {
font-weight: bold;/*特殊标签字体加粗*/
font-style: italic; /* 特殊标签字体斜体 */
}
.param-title.special-label {
width: 120rpx; /* 特殊标签宽度为120rpx */
}
在这个例子中：
- 第一个
view元素，只应用了.param-title的样式，所以是黑色。 - 第二个
view元素，同时应用了.param-title和.special-label的样式，所以是黑色，加粗，斜体。 - 但是因为有
.param-title.special-label，所以第二个元素的宽度被设置为120rpx。
总结:
.param-title.special-label 是一个 复合类选择器，它选择了同时具有 param-title 和 special-label 两个类名的元素，它的优先级高于单独的类选择器，但低于 ID 选择器。 这种选择器常用于精确控制特定元素的样式。
2、CSS 优先级规则
如果 .param-title 也有宽度定义，那么 .param-title 和 .param-title.special-label 的宽度定义就会产生冲突，这时就需要根据 CSS 优先级规则来判断哪个样式生效。
分析：
.param-title(类选择器): 优先级为 10 (一个类选择器)。.param-title.special-label(复合类选择器): 优先级为 20 (两个类选择器相加)。
结论:
由于 .param-title.special-label 的优先级更高（20 > 10），因此 .param-title.special-label 中定义的宽度会覆盖 .param-title 中定义的宽度。
例子：
<view class="param-title"> 普通标签 </view>
<view class="param-title special-label"> 特殊标签 </view>
.param-title {
color: #000; /* 普通标签颜色为黑色 */
width: 100rpx; /* 普通标签宽度为100rpx */
}
.special-label {
font-weight: bold;/*特殊标签字体加粗*/
font-style: italic; /* 特殊标签字体斜体 */
}
.param-title.special-label {
width: 120rpx; /* 特殊标签宽度为120rpx */
}
在这个例子中：
- 第一个
view元素，只应用了.param-title的样式，所以是黑色，宽度为100rpx。 - 第二个
view元素，同时应用了.param-title和.special-label的样式。虽然.param-title定义了宽度为100rpx，但.param-title.special-label的宽度定义120rpx的优先级更高，所以它的宽度最终为120rpx，同时字体也是黑色、加粗和斜体。
总结：
当多个选择器同时作用于同一个元素，并且对同一个属性（例如 width）进行了定义时，优先级更高的选择器定义的样式会覆盖优先级较低的选择器定义的样式。
在这个例子中，param-title.special-label 选择器拥有更高的优先级，所以它的 width: 120rpx; 会覆盖 param-title 选择器的 width: 100rpx;。
因此，.param-title.special-label 定义的宽度会生效。
