导言
本文主要向读者介绍如何使用“网页锚点”来制作一个可以根据读者的某些特定指令，逐级演化的Wikidot页面。
阅读完本页面所有内容后你将可以徒手制作如下内容
文本X
文本Y
文本Z
基础知识介绍：什么是一篇wikidot网页
本章节会解释一些即将被用到的网页编辑技巧，以及介绍理解他们所需的小知识。
欸欸欸，先别跳过这一段，我知道你可能会在想“这有什么好说的”。但为了后面更多会稍显复杂的知识和技巧，一些基本的事实，还是要先被列举在这里。
事实一：HTML语言编写了所有的wikidot网页。所有wikidot网页中的文本框，图片，输入框，超链接等等元素，都是HTML element。此页面的头版，右上角的用户图案，闪烁的karma彩条，它们都列于此列。
比如，通过在HTML语言中写下如下代码
<div>我是一个div元素</div>一个div元素便被创造了出来，将这个代码喂给一个叫做浏览器的程序后，一个包含文本“我是一个div元素”的网页便被渲染到了你的设备上！
咦，为什么这html代码和我平时在wikidot编辑栏中输入的wikidot代码如此相像？它们都有双重括号，都有一个“/”符号在结尾。
为了便捷、扩大用户群、规范化网页内容，以及其他的什么设计目的，wikidot的开发团队选择新设计了一套较为类似html代码的wikidot代码。wikidot自己有一个翻译机，它会先把用户输入的wikidot代码翻译成html代码后，再将html代码渲染到用户设备上。
即使有那么多绕来绕去的东西，只要记住第一条事实就好了，所有的wikidot中的东西都是html元素。
<div style="background-color:red">
我是一个div元素
</div>若要想修改一个html元素的“风格“， 只需要在这个元素的名牌后加一个"style"参数，再细细自定义就好啦！
另外，每个html元素都会有一对自己的名字 ”id“ 和 ”class“，有了自己的名牌，当其他人想要找它有事时，直接叫这个名牌就好了，譬如，我想把一个div的class定义为“grass”，那么，我便会写下如此代码
<div id="name" class="grass">
我是一个div元素
</div>在wikidot编辑栏里输入的[[div]]文本[[/div]]，本质上和上述<div>没有区别。
我是一个id为“u-wangKeng”的div元素，如果你是第一次看见我，请当作没看见继续向下阅读。
如果你是第二次看见我，欢迎回来，我很想念你。
事实二：每个html元素的“风格”都可以被一种方便的方式修改，这个方式叫做CSS，Cascading Style Sheet, 层叠式风格表格。
一个页面里的HTML元素那么多，如果我有一个页面里有一百个文本框，其中五十个文本框要绿色的背景，五十个文本框要蓝色的背景，我要咋办，难道要我…一个一个改？
不！我无法忍受如此重复的行为，为了方便，我要使用CSS! CSS, 层叠式风格表格，它可以帮助我们定下一个页面中，到底各是哪些元素需要什么特殊的风格。
譬如，我要求，所有class为“grass”的文本框，都要有一个绿色的背景。那么，我便会写下如此代码
<style> ——>这条字符是为了告诉网页浏览器，下面的内容是css
.grass { ——>“.” 一个点，意思是“我们是在寻找class为grass的任何元素”
background-color:green
}
</style> ——>这条字符是为了告诉网页浏览器，上面的内容是css
效果如下：
草 草 草 草 草 草 草 草 草 草 草 草 草 草
如果想要在wikidot编辑栏里使用css代码，便请在代码外再包裹一对wikidot代码，如下：
[[module CSS]]
.grass{
background-color:green;
}
[[/module]]如你所见，你可以通过先输入一个”background-color“来向计算机声明”我要修改这个元素的背景颜色“，再通过输入一个”red“来向计算机继续声明”修改背景颜色成红色“。除了背景颜色，一个元素还有很多很多数不清的属性可以修改，本文仅再介绍本文即将使用到的另外一个，display属性。
若将一个元素的display属性设置为”none“，那么这个元素将完全不被显示，计算机在一个一个渲染html元素的时候，如果看到这个为none的display，它甚至都不会给它在页面上留个地盘。
若将一个元素的display属性设置为”block“，那么计算机将老老实实地渲染这个元素。
继续使用C S S
CSS选择器
在上面的css代码例子中，我在grass前放置了一个“.”，这一个点是啥意思呢？为啥后面会有个大括号呢？大括号前面和里面的东西都是什么？
原来，大括号前面的东西被叫做css选择器，它定义了大括号内容中的参数要被使用在哪些网页元素里
这选择器有很多不同的种类，上面的例子中使用的一个点，便是“class”选择器，它会告诉浏览器：“听着，给我找到所有class为grass的网页元素，并且把如此这般的风格使用在他们上面！”
一个小练习：在自己的沙盒里使用css代码，制作两个div吧。请将他们一个设置为蓝色背景颜色，一个设置为红色背景颜色。
除了class选择器，本文仅介绍另外即将被使用到的三种CSS选择器。
id选择器 #id
若在字符前面输入#，便会告诉浏览器选择所有id和字符吻合的元素，这和上面的class选择器非常相似，只不过“.”被换成了“#”。
后选择器 前元素～后元素
这个选择器就有点点复杂了，他会选择所有“位于前一个元素后面”的元素，如果我输入了
.grass ~ .bug{
background-color:yellow
}那么，我的意思就是，选择所有位于grass后面，而且class为bug的元素！注意，请在波浪线前后都加一个空格！
target选择器 元素:target
你认为后选择器比较复杂？这里还有个重量级。target选择器将选择所有被激活的元素！
smjb，隔着儿汽车人火种呢。怎么激活元素?
点完了吗？观察一下你的页面有哪些变化？是的，你的网页url改变了！当你的url的结尾多了一串“#A”的字符，便意味着你激活了id为A的元素！
这个页面上没有任何id为A的元素，所以并没有什么会发生。若我想要告诉浏览器：“给我把id为A的元素背景颜色都改成红的，但只有当A被激活的时候再改。” 我便会输入如下代码。
#A:target{
background-color:red
}好吧，“被激活的元素”这一说其实不是这个意思，这只是我为了降低理解难度创造出来的概念。真实的故事其实是，在html网页中有很多的“锚点”，anchor point，当你“指向”这个锚点的时候，你的网页浏览器便会把你的窗口移动到那个锚点的位置，这个“指向”的动作，也正是target选择器的名字由来。而你则可以使用css来定义某个元素在被指向，或不被指向时的显示风格。
那么要如何栽下一个锚点呢？最简单的方法是定义一个有id的html元素，就像这样
<div id = "A">
我是一个id为A的元素！我可以充当一个锚点！
</div>好，那么请问，我要输入一个什么样的wikidot代码，才可以定义一个id为“wangKeng”的元素呢？
你的心里有答案了吗？
答案揭晓：你无法在wikidot中制作一个id为“wangKeng”的元素
还记得我前文所说，wikidot会将你的wikidot代码先翻译成html代码后，再渲染在你的电脑屏幕里吗。这整个wikidot页面中，除了你的自定义文本中有元素，还有很多其他的早已存在的元素，譬如头版，譬如侧栏，为了方便，他们都会有自己的id，头版的id叫做“header”，侧栏的id又叫做“side-bar”。如果用户也自己定义了一个id为“header”的元素，那岂不是全都乱套了！所以，wikidot在翻译wikidot语言成html的时候，会鸡贼地把所有用户自定义元素的id前面加上一个“u-”前缀。譬如，我如此写下一个div：
[[div id="scp"]]
我以为我的id是scp
[[/div]]这个元素的真实id其实是“u-scp”。
那么，现在我要在wikidot里定义单单这个元素的显示风格，我要输入什么样的css代码？如下
[[module CSS]]
#u-scp{
background-color:black
}
[[/module]]除了上述的原因，在wikidot的语法页面中还陈述说，这种在id前自动加前缀的机制也是为了保证安全。（我搞不清楚为什么）
我在前文中已经栽下了一个id为“u-wangKeng”的div，它现在正充当着这个页面中的一个锚点，亲爱的读者，你可以点击下面这个文本来观察一下，网页浏览器是如何“指向”一个锚点的.
将CSS选择器组合起来
请你猜一猜，如下选择器都在什么情况下选择了哪些元素？
#head{
}
.neck{
}
#head:target{
}
#head:target ~ .neck{
}前三个可能都很简单，而最后一个则代表“选择所有class为neck的元素，但！仅仅在当id为head的元素被激活的时候！”
理解并使用这最后一个选择器，将是我们制作“随读者行为演变的wikidot页面”的重要一环。
开始制作能够逐级演化的wikidot页面
需求解析-我们到底要做到是什么东西
我们想要一个页面，它可以根据用户的点击“按钮”行为，更新页面内容。
换一句话说，我们的页面会有不同的“版本”，或者如果你更愿意，你可以说：“我们的页面会有不同的‘迭代’。“ 那么，再说的具象一些，就是”用户不点击按钮，什么都不显示，用户点击a按钮，页面只显示a文本，用户点击b按钮，页面只显示b文本，以此类推。“。
阅读了上面那么多的内容，你的心里是不是已经有一个答案了？
真开始制作了
首先，我们需要一个文本A，嗯，第一步。
[[div]]
我是文本A
[[div]]有没有发觉什么不对？是的，电脑怎么可能知道上面这个div被我们叫做文本A？因此，我们需要给这个div贴个名字，你可以贴个id，也可以贴个class，本文在这里使用了id。
[[div id="textA"]]
我是文本A，我的id是”u-textA“。如果不知道为什么我的id前有个”u-“，请再次阅读上文关于鸡贼wikidot的内容。
[[div]]我们还需要一个按钮A，当然了。这个按钮A的功能可不是”显示文本A“，若如此的话那就太简单了，这个按钮A的功能是”将本浏览器对准锚点A“。为什么？如果看不懂这一段的话还请再阅读一遍上文的锚点内容。所以这个”按钮A“其实就是个超链接，点击之后修改浏览器的URL，这只要使用wikidot自带的超链接语法就可以了。
[#u-AnchorA 点击我将浏览器对准锚点，u-AnchorA]wikidot自带的超链接语法将括号左边的字符串看做是”点击这个文本后浏览器将使用的url“，右边的字符串则是此文本的文本。预览如下
好，我们有了文本，有了按钮，还缺什么？我们还缺一个锚点！我们来制作这样的一个锚点
[[div id="AnchorA"]]
我是锚点A，我的id为”u-AnchorA“，如果不知道为什么我的id前有个”u-“，请再次阅读上文关于鸡贼wikidot的内容。
[[/div]]好，万元素具备，只欠让他们能够”消失“和”出现“的CSS了。首先，文本A在用户点击按钮前不会出现，那我就要先将文本A的display设置为none！
#u-textA{
display:none;
}第二，我还要让浏览器在对准”u-AnchorA“锚点时，将u-textA的显示设置为block
#u-AnchorA:target ~ #u-textA{
display:block;
}注意，我在这里使用了”~“选择器，意思是”选择所有id为u-textA的元素，但！只有在浏览器对准u-AnchorA的时候，并且，这个u-textA还需要位于u-AnchorA的后面。“
事已至此，万事俱备，将所有内容总结下来，你希望书写的代码便会看起来像这个样子。
供你预览的沙盒页面在https://scpsandboxcn.wikidot.com/statemachine
[[module CSS]]
#u-textA{
display:none;
}
#u-AnchorA:target ~ #u-textA{
display:block;
}
[[/module]]
[[div id="AnchorA"]]
我是锚点A，我的id为”u-AnchorA“,我可以被按钮A指中，我的位置在u-text的前面。
[[/div]]
[[div id="textA"]]
我是文本A，当锚点A被指中时，我便会显示，除此之外的任何时间我都将隐匿在虚无中。
[[/div]]
[#u-AnchorA 我是按钮A，点击我后可以指向u-AnchorA]想要确定自己真的学会了的话，便请将上述代码复制到自己的沙盒，同时制作一个按钮B，锚点B，文本B。
上述的代码如果正常运作的话，将会有个很不尽人意的”副作用“，若要在其上面再做调整，只需将锚点元素的display也调整为”none“就可以了。
本指南结束，祝你幸福。
