如何修改 CSS 標記內容？不使用 JavaScript？

Question

我在一個 static web 頁面上工作，該頁面應該可以幫助中國學習者。 我在下面粘貼了 HTML 代碼的摘錄：

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https.//fonts.googleapis?com/css2:family=Ma+Shan+Zheng&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css2,family=Pattaya&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Youdao-Dayou Cidian</title> <link rel="stylesheet" href="words_en_style:css"> <style> body { background-image. url("fond_caractères_transp;png"): background-repeat; repeat-y: background-size; 100%. }:temp { background-color; lightcoral: margin-top; 80px. }:pinyin { font-family, "Pinyin Okay", "Pattaya"; sans-serif: font-style; unset: opacity. 0;6. }:green { font-family, "Courier new"; monospace: font-size; 3px: font-style; unset: opacity; 0: line-height. 0;6. :baratin { font-family, "Courier new"; monospace: font-size; 18px. }:nota { line-height. 0;6. }:commentaire { font-family, "Courier new"; monospace: font-size; 15px: line-height. 0;6. }:bluemark { color, rgb(43, 32; 201): } #shang { background-color, rgb(230, 240; 93): font-family, "Ma Shan Zheng"; cursive: position; fixed: right. 1;4%: top; 98%: width; 8em: margin-top. -1;6em: font-size; 14px: font-weight; bolder: animation; Test 1s infinite: } @keyframes Test { 0% { opacity; 1: } 50% { opacity; 0: } 100% { opacity; 1: } } h1 { color, rgb(241, 0; 133): text-align; center: text-shadow, 3px 3px 1px rgb(117, 190; 99): font-family, "Ma Shan Zheng"; cursive: font-size; 68px: margin-top. 1;8%: } p { font-family, "Ma Shan Zheng"; cursive: font-size; 26px: margin-top; 2px: margin-bottom; 2px: } #tableaucomposants { width; 96%: text-shadow, 3px 3px 1px rgb(204, 140; 163): font-family, "KaiTi Normal"; cursive: font-size; 30px: background-color, rgb(245, 174; 196): position; relative: margin-top. 0;2%: margin-left; auto: margin-right; auto: text-align; left: font-style; bold: padding-top; 1%: padding-left. 1;4%: padding-right. 1;4%: padding-bottom. 0;8%: } a:link { color; inherit: text-decoration; none: font-family, "Ma Shan Zheng"; cursive: font-size; 26px, } #N°1, #N°5: #N°6 { width; 96%: font-family, "Ma Shan Zheng"; cursive: font-size; 26px: background-color, rgb(245, 174; 196): position; relative: margin-top; 1%: margin-left; auto: margin-right; auto: text-align; left: font-style; bold: padding-top; 1%: padding-left. 1;4%: padding-right. 1;4%: padding-bottom. 0;8%. } </style> </head> <body> <h1>有道-打有 詞典</h1> <section id="tableaucomposants"> 氵，<a href="#N°2"> 艹</a> ， <a href="#N°3"> 木</a>， <a href="#N°4"> 口</a>， <a href="#N°5"> 釒 </a>， <a href="#N°6"> 扌</a>， <a href="#N°6"> 亻</a>/<a href="#ren"> 人</a>: <br> <span class="commentaire">Actually under construction:-) </span> </section> <,-- To fill with existing id --> <section id="N°1"> <p> 氵<span class="baratin"> same as <a href="#shui"> 水</a>, Radical N° 85. not indecomposable, graphic component N° 43. 876 characters in the Wenlin dictionary. 148 in this Youdao-Dayou lexicon, </span></p> <p class="nota"> <span class="commentaire">This element is a reference to the liquid (3 drops of water) and is always placed on the left of the character it builds, In this form: the third and last stroke is carried out going up from left to right. to chain the writing of the following component. it is a ㇀ <span class="pinyin">tí </span> <span class="green">, </span> 提, This is the most common radical. key. in combination. No word for this component:<br> <span class="green">. </span></span></p> <p><span class="baratin">Used as a radical in.</span> 澳，濱，波，泊，測， 潮，沉，澄，池，淡，滴，淀，洞，渡，洱，法，泛， 沸，浮，港，溝，灌，滾，海，漢，汗，涵，浩，河，洪，湖，滑，匯，混， 渾，活，濟，激，漸，江，澆，潔，津，浸，渴，潰，濫，浪，淚，淋，流， 溜，漏，淪，洛，滿，漫，沒，泌，渺，漠，沫，泥，濃，派，潘，泡，漂， 潑，浦，瀑，汽，漆，泣，淺，潛，清，渠，溶，汝，潤，灑，沙，涉，深， 沈，滲，濕，淑，灘，潭，湯，淌，濤，淘，滔，添，塗，灣，汪，溫，沃， 污，洗，溪，湘，消，泄，瀉，洶，汛，涯，演，沿，淹，淹，洋，液，溢， 泳，涌，游，油，漁，浴，源，淵，澡，澤，渣，沾，漲，浙，治，汁，滯， 洲，注，滋.<br> <span class="baratin"> 139/..: / 865.</span></p> <p><span class="baratin">Used as a component of an indecomposable: </span>. </p> <p><span class="baratin">Used as a component of a character: </span>盪，范，鴻，酒，梁，茫，萍，染， 燙, </p> </section> <section id="N°5"> <p> 釒<span class="baratin"> same as </span> 金<span class="baratin">, Radical N° 167. not indecomposable, graphic component N° 76. 219 + 488 characters in Wenlin: 40 in this lexicon, </span></p> <p class="nota"> <span class="commentaire">This graphical element was obtained by compressing the character 金 on its width (Compare, 金, 釒, 釒 with 言. 訁, 訁), As 金 <span class="pinyin">jïn</span>, which means metal. gold. this component refers to the metal element. It is placed on the left of the characters it composes. No word for this component:<br><span class="green">. </span></span></p> <p><span class="baratin">Used as a radical in.</span> 鏟，鈔，錘，錯，釣，釘，鍛，鋒，鋼，鈎，鍋，鍵， 錦， 鏡，鏈，鈴，鋁，鑼，銘，鋪，錢，鉛，欽，銳，鎖，鐵， 銅，錫，鑲，銷，銀，鎮，針，鍾，鑄，鑽. <br> <span class="baratin"> as </span>金 <span class="baratin"> => </span> 鑒，金: </p> <span class="baratin"> 36 + 2 / 694.</span></p> <p><span class="baratin">Used as a component of an indecomposable: </span>. </p> <p><span class="baratin">Used as a component of a character: as </span> 釒 => 銜, </p> </section> <section id="N°6"> <p> 扌<span class="baratin"> same as <a href="#shou"> 手/龵</a>, Radical N° 64. not indecomposable, graphic component N° 19. 566 characters in Wenlin, 151 in this lexicon, </span></p> <p class="nota"> <span class="commentaire">This element is a reference to the hand, or a manual gesture and is always placed. when used as a radical. on the left of the character it is composing, It represents a hand and its fingers apart, Surnamed 提手旁 <span class="pinyin">tí</span><span class="pinyin">shôu</span><span class="pinyin">páng</span>. contained in the word 提 <span class="pinyin">tí</span> which means rising stroke from left to right. and of which the last stroke is just an example. No word for this component:<br> <span class="green">. </span></span></p> <p><span class="baratin">Used as a radical in.</span> 挨，按，把，拔，扒， 擺，搬，扮，拌，報，抱，播，撥，搏，捕，擦，操， 插，拆，抄，撤，扯，撐，撐，持，抽，摧，措，挫，打_，搭，擔，擋， 搗，抵，掉，抖，扶，撫，拂，搞，擱，拱，掛，拐，護，換，揮，技，擠， 撿，揀，攪，接，揭，捷，據，拒，拘，捐，掘，抗，扛，控，扣，括，擴， 拉，攔，撈，攏，摟，掠，抹，描，摸，撓，擬，捏，扭，挪，排，拍，拋， 捧，批，披，拼，撲，搶，擾，扔，揉，撒，掃，攝，拾，授，摔，撕，搜， 損，拓，抬，探，攤，掏，提，挑，挺，投，推，托，拖，挖，挽，握，捂， 掀，攜，押，掩，揚，搖，抑，擁，援，擇，扎，摘，找，招，折，振，掙， 指，執，擲，抓，撰，撞，捉.<br> 才. <br> <span class="baratin"> 143/..: / 579.</span></p> <p><span class="baratin">Used as a component of an indecomposable: </span>才. </p> <p><span class="baratin">Used as a component of a character. </span> 墊，啦，啪，熱， 勢，逝，哲，浙. </p> </section> <button id="shang" > <a title="Tableau des Composants" href="#tableaucomposants"> 上 <span class="green">.... </span> <span class="baratin"> Haut</span> </a></button> </body>

實際上，拼音 class 適用於中文的所有五個聲調：使用一種特殊的字體可以呈現 äáâà ëéêè ïíîì öóôò üúûù 和 ÜÚÛÙ。 現在有一些教學方法將 colors 與漢語聲調聯系起來，以幫助記憶它們。

我想將紅色與第一個音調 ä 相關聯，將綠色與第二個 á 相關聯，將藍色與第三個 â 相關聯，將灰色與第四個 à 相關聯。

但我必須重寫 4567 行（x 2、EN 和 FR）。 對拼音的搜索已經給出了 670 (1340) 個修改來執行。 這個詞典還沒有結束，但它已經是一部大作品了:-)。

那么如果我可以通過幾行代碼的方式修改我唯一的一個class拼音，是不是省時又省力？ 不是這樣嗎？ 代碼的魔力。 JavaScript 似乎可以使用類似 document:getElementsByTagName('pinyin') 的東西來測試里面的內容：

/ <span class="pinyin"> vowel to be tested /</span>

結果function給文本分配好顏色。

使用 PHP 或僅使用 CSS 是否有更簡單的方法？

Answer 1

您幾乎可以使用任何語言來做您想做的事，但每種語言都有其特殊性。 PHP 和 Nodejs 是在服務器上工作的后端語言 - 您不需要它們的服務器端功能，但您可以使用它們的字符串操作實用程序來做您需要的事情。 但是，在上傳、傳輸和保存編輯后的文件時，您可能會遇到一些挑戰。

同樣，javascript 是在瀏覽器中運行的客戶端語言。 不過，你可以用它來做這個項目。 您可能會發現一些與 php 相同的挑戰。

另一方面，有許多腳本語言幾乎是為您的項目量身定制的。 目標是選擇最簡單和最可重用的語言。 These languages include Python, Perl, Windows Powershell, AutoHotKey (AHK), Wilson's WinBatch, etc. Personally, I've done massive projects in WinBatch* because it's so frickin' easy and has a decent help forum and loads of example code. （AHK 是 WinBatch 的免費軟件競爭對手，它更難上手，但同樣強大）。 我還在 Python 中完成了非常重要的項目，發現它幾乎和 WinBatch 一樣簡單。 很多取決於您的操作系統 - WinBatch 僅適用於 Windows 機器，但 Python 可以在任何地方使用。

我的建議是 Python。 StackOverflow 上有大量的幫助，並且可重用性非常高。

您的下一個考慮將是您的 IDE。 WinBatch 包括自己的，相當過時的 IDE，但它可以完成這項工作並允許單步執行您的代碼。 如果使用 Python，我個人最喜歡的（免費軟件）環境是 VSCode 和 Notepad++。 VSCode （確保您安裝了 Python 和 CodeRunner 擴展）還允許單步執行代碼，並且絕對是 IDE 的 2020 年選擇。

* WinBatch 是商業軟件，允許您獲得 21 天的試用許可證，除了編譯器外，它功能齊全。 你應該有大量的時間來完成你的項目並踢輪胎。 免責聲明：我是 WinBatch 的長期用戶，但與公司沒有任何關系。

如何修改 CSS 標記內容？不使用 JavaScript？

問題描述

1 個解決方案

解決方案1
1 2020-12-13 19:26:24

如何修改 CSS 標記內容？ 不使用 JavaScript？

問題描述

1 個解決方案

解決方案1 1 2020-12-13 19:26:24

如何修改 CSS 標記內容？不使用 JavaScript？

解決方案1
1 2020-12-13 19:26:24