通過在一個& ltsection & gt在HTML全站點編輯GUI中，我想快速創建具有交替背景樣式的部分:

可以靈活地確定系列的開始部分(不一定是頁面流中的第一部分！) 加上一個規則集，其中交替系列將結束， 以及該系列將具有什么樣的特定背景交互風格。 而不是:選擇多個部分，樣式他們或給他們所有特定的助手類。每次都要重復做。

我如何想象工作流程 在& ltsection & gt在我希望我的系列開始的地方，我將簡單地設置適當的3個助手類:

。has-bgcolor-alternating —通用幫助器類，它告訴在這里開始bgcolor系列。

。以foreign-element前的部分結束||。section-before-section-with-class | |。ends-never —包含規則集的范圍幫助器類，系列將在該規則集中結束。

。備用-主要-次要||。交替-搞笑-悲傷||。交替-灰色-淺灰色||...—設置顏色、圖像模式等的特定樣式類。

問題是: 我如何編寫CSS選擇器來實現2中表達的用戶意圖？可能嗎？ HTML代碼示例 HTML注釋中有輔助CSS類和相應的行為期望(1-2)，代碼塊下面有期望3:

<section class=".has-bgcolor-alternating .ends-with-section-before-foreign-element .alternates-primary-secondary">
    <h2>Heading One</h2>
    <p>01 one one one one one. One one ...</p>
</section>

<section>
    <h2>Heading Two</h2>
    <p>02 two two. Two two two...</p>
    <img src="cat.jpg"></img> <img src="dog.jpg"></img> <img src="fish.jpg"></img>
    <p>Two two two. Two blah ...</p>
</section>

<section> … 03 with whatever inside … </section>
<!-- Expectation 1: .ends-with-section-before-foreign-element ends at 03 b/c IMG element follows. -->

<img src="grass.jpg" class="full-width" alt="Another full width element between the full width sections."></img>

<section style="/* Manually set bg-color */"> … 04 with whatever inside … </section>
<section style="/* Manually set bg-color */"> … 05 with whatever inside … </section>
<section class=".has-bgcolor-alternating .ends-with-section-before-section-with-class .alternates-grey-lightgrey"> … 06 with whatever inside … </section>
<section> … 07 with whatever inside … </section>
<section> … 08 with whatever inside … </section>

<video src="water.mp4" class="full-width" alt="Another full width element between the full width sections."></video>

<section> … 09 with whatever inside … </section>
<section> … 10 with whatever inside … </section>
<!-- Expectation 2: .ends-with-section-before-section-with-class ends at 10 b/c another section.has-bgcolor-alternating follows at 11. -->
<section style=".has-bgcolor-alternating .is-alternating-funny-sad"> … 11 with whatever inside … </section>
<section> … 12 with whatever inside … </section>
<section> … 13 with whatever inside … </section>

... further sections and other HTML elements ...

<section> … 18 with whatever inside … </section>
<section> … 19 with whatever inside … </section>
<section> … 20 with whatever inside … </section>

預期3:如果我把第01節改成。ends——絕不是一個快速的設計實驗，

這適用于任何& ltsection & gt元素直到頁面末尾，重寫所有其他。有-bgcolor-交替節，直到頁面結束，如第06節。 覆蓋CSS選擇器機制最好足夠強大/具體，以避免！重要的價值觀。(可能？) 感謝貢獻一個堆棧溢出的答案！

請務必回答問題。提供詳細信息并分享您的研究！但是要避免…

尋求幫助、澄清或回應其他答案。根據意見發表聲明；用參考資料或個人經歷來支持他們。要了解更多，請查看我們關于撰寫精彩答案的提示。