如何修改CSS标记内容？不使用JavaScript？
如何修改CSS标记内容？不使用JavaScript？
提问于 2020-12-11 12:43:24
我在一个静态网页上工作，这是为了帮助中国学习者。我粘贴在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>
事实上，拼音班适用于汉语的所有五种声调:一种特殊的字体，可以呈现“阿亚纳”和“于图”。现在有一些教学方法把颜色和汉语声调联系起来，以帮助记忆它们。
我想把红色和第一音调联系起来，把绿色联想到第二音，把蓝色联想到第三音，把灰色联想到第四音调。
但我必须重写4567行(x2，EN和FR)。对拼音的搜索已经给出了670 (1340)个修改来执行。这个词典还没有结束，但它已经是一部大作品了:-)。
所以，如果我能用几行代码来修改我唯一的一个类拼音，我就节省了时间和精力！不是吗？密码的魔力？看起来，JavaScript可以使用类似于document.getElementsByTagName(‘拼音’)之类的东西来测试里面的内容：
/ <span class="pinyin"> vowel to be tested /</span>并将结果的功能分配给文本良好的颜色。
有什么更简单的方法可以用PHP或CSS来实现呢？
回答 1
Stack Overflow用户
发布于 2020-12-13 19:26:24
你几乎可以用任何一种语言来做你想做的事情，但每一种语言都有其特殊性。PHP和Nodejs是在服务器上工作的后端语言--您不需要它们的服务器端功能，但可以使用它们的字符串操作实用程序来满足您的需要。但是，您可能会发现一些挑战，上传、传输和保存已编辑的文件。
类似地，javascript是在浏览器中运行的客户端语言。尽管如此，你还是可以用它来做这个项目。您可能会发现一些与php相同的挑战。
另一方面，有许多脚本语言几乎是为您的项目量身定做的。目标是选择最简单和最可重用的语言。这些语言包括Python、Perl、、AutoHotKey (AHK)、Wilson的WinBatch等等。就我个人而言，我在WinBatch*中做了大量的项目，因为它太简单了，有一个不错的帮助论坛和大量的示例代码。(AHK是WinBatch的免费软件竞争对手，更难开始，但也同样强大)。我还用Python完成了非常重要的项目，发现它几乎和WinBatch一样简单。很大程度上取决于您的操作系统-- WinBatch只在Windows机器上工作，但是Python在任何地方都能工作。
我推荐的是Python。在StackOverflow上有大量的帮助，可重用性因素也很高。
您的下一个考虑将是IDE。WinBatch包含了它自己的，相当过时的IDE，但是它完成了这项工作，并且允许跨出您的代码。如果使用Python，我个人最喜欢的(免费软件)环境是VSCode和Notepad++。VSCode (确保安装了扩展)也允许逐步执行代码，并且肯定是2020年的首选。
* WinBatch是一种商业软件，它允许您获得21天的试用许可证，除了编译器之外，它完全可以使用。你应该有大量的时间来完成你的项目和踢轮胎。免责声明:我是一个很长时间的WinBatch用户，但与公司没有任何联系。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65251604
复制相关文章
相似问题
腾讯云开发者
