我想实现的是效果是，单选框选中之后修改的样式比较多，不在radio的基础上修改，而是把radio直接隐藏，给 radio 绑定一个 label ，所有的样式都通过label 展示，但是获取选中的 radio 之后，可以自定义修改选中的radio的样式，但是操作修改与radio对应的 label 的样式。
radio 选中的样式是通过添加 .wx-radio-input-checked 类名修改样式，原本想通过 wx-radio-input-checked ~ label 修改label的样式，但是无法获取选中的radio对应的 label 去修改样式。以下是部分代码
<radio class="third">
<label class="mylabel">third</label>
</radio>
在小程序中
.third {
.wx-radio-wrapper {
& >.wx-radio-input {
background-color: #f33;
&.wx-radio-input-checked {
background-color: #555;
&::before {
color: #0ff;
}
}
}
/* 可以生效*/
.mylabel {
color: #aaa;
}
/* 不可以生效
& > .mylabel {
color: #aaa;
}
*/
}
}
在浏览器中
.uni-radio-wrapper {
/* 可以生效*/
& > .mylabel {
color: #aaa;
}
}
这是浏览器中查看到的dom，
在浏览器中 uni-label 是 .uni-radio-wrapper 子节点，但在小程序中，.uni-radio-wrapper > .mylabel 无法修改， .uni-radio-wrapper .mylabel 可以修改，即 uni-label 是 .uni-radio-wrapper 后代但不是直接子节点。我也不知道又什么方法可以查看小程序渲染的真是dom。
wx-radio { -webkit-tap-highlight-color: transparent; display: inline-block; } wx-radio[hidden] { display: none; } wx-radio .wx-radio-wrapper { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; vertical-align: middle; } wx-radio .wx-radio-input { -webkit-appearance: none; appearance: none; margin-right: 5px; outline: 0; border: 1px solid #D1D1D1; background-color: #ffffff; border-radius: 50%; width: 22px; height: 22px; position: relative; } wx-radio .wx-radio-input.wx-radio-input-checked { background-color: #09BB07; border-color: #09BB07; } wx-radio .wx-radio-input.wx-radio-input-checked:before { font: normal normal normal 14px/1 "weui"; content: "\EA08"; color: #ffffff; font-size: 18px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.73); -webkit-transform: translate(-50%, -48%) scale(0.73); } wx-radio .wx-radio-input.wx-radio-input-disabled { background-color: #E1E1E1; border-color: #D1D1D1; } wx-radio .wx-radio-input.wx-radio-input-disabled:before { color: #ADADAD; } wx-radio-group { display: block; } wx-radio-group[hidden] { display: none; }<radio ></radio>
<label></label>
但是渲染出来的真实dom
wx-radio wx-radio-input 选中radio 得在 wx-radio-input 才能知道，label 比他们高了一级。
随后我的 dom 修改为
<radio>
<label></label>
</radio>
无法通过 .wx-radio-input 的兄弟元素找到 label 。.wx-radio-input 是 .wx-radio-wrapper 的亲子元素，但 label 不是。
这时候 .wx-raido-input 的兄弟元素是 label 的祖先元素，这个元素我不知道是哪个。
请移步uni-app官方社区
选中的 radio 会添加 .wx-radio-input-checked 这个类目，我只需要 .wx-radio-input-checked 的后续元素选中 label 即可在选中radio的时候同步修改对应label的样式，现在的问题就是 .wx-radio-input-checked 的兄弟元素找不到 lable 标签，.wx-radio-input-checked 是 .wx-radio-wrapper 的亲子元素，但 label 不是，只需要找到和 .wx-radio-input-checked 是兄弟元素且是label的祖先元素即可。