如何修改 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