上下兩張圖片，中間有一條白色縫隙，但是客戶想要完全拼接。于是就開始分析代碼。

1、index.wxml

<view class="marketing-materials-pannel-wrap"><view class="marketing-materials-pannel-box"><view class="marketing-materials-title-box"><view class="marketing-materials-item-title-box {{ currentIndex === index ? 'active-class': '' }}" wx:for="{{ detail.detailList }}" wx:key="item" data-index="{{ index }}" catch:tap="handleTitleClick">{{ item.active }}</view></view><view class="marketing-materials-item-value-box"><!-- <rich-text nodes="{{ detail.detailList[currentIndex].value || '' }}" /> --><rich-text nodes="{{ detail.detail }}" class="rich-text-style"/></view></view>
</view>

2、index.js

const properties = {detail: Object
}
const data = {currentIndex: 0
}
const observers = {}
const methodMap = {handleTitleClick(e) {const { index: currentIndex } = e?.currentTarget?.datasetthis.setData({ currentIndex })}
}
const customMethodMap = {}
const methods = {...customMethodMap,...methodMap
}
const behaviors = {}
const relations = {}
const externalClasses = []
const pageLifetimes = {show() {},hide() {},resize() {}
}
const lifetimes = {created() {},attached() {// 組件掛載到頁面時調用console.log("Component attached, detail =", this.properties.detail);console.log("Component attached, detail.detail =", this.properties.detail.detail);},ready() {},moved() {},detached() {}
}Component({ properties, data, observers, methods, pageLifetimes, lifetimes, behaviors, relations, externalClasses })

3、detail.detail

<div><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_01_642681.jpg" style="max-width:100%;" contenteditable="false" /><p><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_02_311369.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_03_680880.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_04_504903.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_05_785733.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_06_138233.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_07_715648.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_08_281797.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_09_119610.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_10_517697.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鮮保鮮膜_11_238141.jpg" style="max-width:100%;" contenteditable="false" /></p>
</div>

為什么 .rich-text-style 樣式可以生效？

你提到通過給 <rich-text> 組件添加一個自定義類名 class="rich-text-style"，并且使用 .rich-text-style 選擇器來設置樣式后，圖片之間的空隙問題得到了解決。這背后的原因涉及到微信小程序中樣式的優先級和作用范圍。

1. <rich-text> 組件的特殊性

<rich-text> 是微信小程序中的一個內置組件，用于渲染 HTML 字符串。它的內部內容是通過 Shadow DOM 渲染的，這意味著外部樣式文件中的樣式默認情況下不會直接影響到 <rich-text> 內部的內容。然而，微信小程序提供了一種機制，允許你通過為 <rich-text> 添加自定義類名來影響其內部內容的樣式。

2. 類選擇器的作用范圍

當你為 <rich-text> 組件添加一個自定義類名（如 class="rich-text-style"），并使用該類選擇器（如 .rich-text-style）來設置樣式時，微信小程序會將這些樣式應用到 <rich-text> 的內部內容中。這是因為微信小程序的樣式系統會將帶有自定義類名的 <rich-text> 視為一個特殊的容器，允許你通過類選擇器來影響其內部元素的樣式。

<!-- WXML -->
<rich-text nodes="{{ detail.detail }}" class="rich-text-style"></rich-text>

/* WXSS */
.rich-text-style {line-height: 0;
}

在這種情況下，.rich-text-style 樣式不僅會應用到 <rich-text> 組件本身，還會傳遞給其內部的 HTML 元素（如 img、p 等），從而有效地解決了圖片之間的空隙問題。

3. 樣式優先級

使用類選擇器（如 .rich-text-style）通常比標簽選擇器（如 rich-text）具有更高的優先級。因此，即使有其他全局樣式或默認樣式存在，.rich-text-style 中的樣式也會優先應用，確保 line-height: 0 等樣式能夠生效。

4. line-height: 0 的作用

line-height: 0 是一種常見的技巧，用于消除行內元素（如 img）之間的空隙。默認情況下，img 標簽是行內元素，瀏覽器會在每個行內元素之間插入一個空白字符（類似空格），這會導致圖片之間出現空隙。通過將 line-height 設置為 0，你可以有效地消除這些空白字符，從而使圖片完全拼接在一起。

5. 為什么直接使用 rich-text 選擇器無效？

如果你嘗試直接使用 rich-text 選擇器來設置樣式，可能會遇到樣式不生效的問題。原因如下：

• Shadow DOM 的隔離性：<rich-text> 組件的內部內容是通過 Shadow DOM 渲染的，默認情況下外部樣式文件中的樣式無法直接影響到其內部元素。
• 樣式優先級：如果沒有使用類選擇器，可能某些默認樣式或全局樣式會覆蓋你設置的樣式，導致 line-height: 0 等樣式無法生效。

因此，使用自定義類名（如 class="rich-text-style"）并通過類選擇器（如 .rich-text-style）來設置樣式是一種更可靠的方式，可以確保樣式能夠正確應用到 <rich-text> 的內部內容中。

總結

• <rich-text> 組件的內部內容是通過 Shadow DOM 渲染的，默認情況下外部樣式無法直接影響其內部元素。
• 通過為 <rich-text> 添加自定義類名（如 class="rich-text-style"），并使用類選擇器（如 .rich-text-style）來設置樣式，可以有效地將樣式應用到 <rich-text> 的內部內容中。
• line-height: 0 是一種常見的技巧，用于消除行內元素之間的空隙，從而使圖片完全拼接在一起。
• 類選擇器通常比標簽選擇器具有更高的優先級，因此使用類選擇器可以確保樣式優先應用。