我不确定我的解决方案是否正确设计，但本质上我有两个无线电输入，当我选择一个选项时，它会显示锚标记
.tick.some<!DOCTYPE html>
<html>
<head>
<style>
.option .tick {
display: none;
}
.option input:checked ~ .tick {
display: inline;
}
#happy1:checked ~ .some:after {
content: " (happy1)";
}
#happy2:checked ~ .some:after {
content: " (happy2)";
}
</style>
</head>
<body>
<div class="step1">
<div class="row">
<label class="option">
Option 1
<input type="radio" name="select" id="happy1">
<a href="happy" class="tick">Happy 1</a>
</label>
</div>
<div class="row">
<label class="option">
Option 2
<input type="radio" name="select" id="happy2">
<a href="happy" class="tick">Happy 2</a>
</label>
</div>
</div>
<div>
<a href="linktosomething" class="some">Some</a>
</div>
</body>
</html>
我不知道该怎么做
如果不使用 JavaScript，您将无法根据用户交互直接操作元素的内容。但是，您可以通过利用 :checked 伪类和通用同级组合器 (~) 来实现类似的效果。不幸的是，这种方法有局限性，它不允许您直接在 .some 元素内设置锚标记的 href 属性。
这是代码的修改版本，用于说明可能的解决方法：
<!DOCTYPE html>
<html>
<head>
<style>
.option .tick {
display: none;
}
.option input:checked ~ .tick {
display: inline;
}
.some:after {
content: " (default)";
}
#happy1:checked ~ .some:after {
content: " (" attr(href-happy1) ") happy1";
}
#happy2:checked ~ .some:after {
content: " (" attr(href-happy2) ") happy2";
}
</style>
</head>
<body>
<div class="step1">
<div class="row">
<label class="option">
Option 1
<input type="radio" name="select" id="happy1" />
<a href="happy1" class="tick">Happy 1</a>
</label>
</div>
<div class="row">
<label class="option">
Option 2
<input type="radio" name="select" id="happy2" />
<a href="happy2" class="tick">Happy 2</a>
</label>
</div>
</div>
<div>
<a href="some" class="some"></a>
</div>
</body>
</html>
在此示例中，我向您的无线电输入添加了唯一 ID（id="happy1" 和 id="happy2"），以便更轻松地在 CSS 中引用它们。我还修改了 .some:after 规则以根据单选按钮的状态设置内容。
但是请注意，此解决方案有局限性，而且它更多的是一种解决方法。如果没有 JavaScript，锚标记的实际
href