Html 为什么radiobutton CSS样式的行为与复选框相反？
问题: 我正在尝试让一个纯CSS手风琴工作。Html 为什么radiobutton CSS样式的行为与复选框相反？,html,css,checkbox,radio-button,Html,Css,Checkbox,Radio Button,问题: 我正在尝试让一个纯CSS手风琴工作。 我使用此示例作为开始： 这是我从示例中提取的html（我将复选框的不透明度更改为1，以便更清楚地演示）： 而不是 ul li input[type=checkbox]:checked ~ p { 哦，很酷，：不（：检查）工作；） 谢谢@Niet the Dark Absol 编辑： 更正：适用于除IE以外的所有浏览器（使用Chrome和Firefox进行测试，截至目前最新稳定版本）（使用IE 11进行测试，截至目前为止最新公开版本）。 IE在那里
我使用此示例作为开始：
这是我从示例中提取的html（我将复选框的不透明度更改为1，以便更清楚地演示）： 而不是
ul li input[type=checkbox]:checked ~ p {
谢谢@Niet the Dark Absol 编辑：
更正：适用于除IE以外的所有浏览器（使用Chrome和Firefox进行测试，截至目前最新稳定版本）（使用IE 11进行测试，截至目前为止最新公开版本）。
IE在那里有一个渲染问题
单击后放大，它将正确重画。臭虫
<!DOCTYPE html>
<html class=''>
<head>
<title>Radiobutton-Test</title>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style type="text/css" media="all">
.transition, p, ul li i:before, ul li i:after {
transition: all 0.25s ease-in-out;
}
.flipIn, h1, ul li {
animation: flipdown 0.5s ease both;
}
.no-select, h2 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
width: 100%;
height: 100%;
perspective: 900;
overflow-y: scroll;
background-color: #dce7eb;
font-family: "Titillium Web", sans-serif;
color: rgba(48, 69, 92, 0.8);
}
body {
min-height: 0;
display: inline-block;
position: relative;
left: 50%;
margin: 90px 0;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #ff6873 inset;
background-color: #fefffa;
max-width: 450px;
padding: 30px;
}
@media (max-width: 550px) {
body {
box-sizing: border-box;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1, h2 {
color: #ff6873;
}
h1 {
text-transform: uppercase;
font-size: 36px;
line-height: 42px;
letter-spacing: 3px;
font-weight: 100;
}
h2 {
font-size: 26px;
line-height: 34px;
font-weight: 300;
letter-spacing: 1px;
display: block;
background-color: #fefffa;
margin: 0;
cursor: pointer;
}
p {
color: rgba(48, 69, 92, 0.8);
font-size: 17px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
}
ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 4px;
padding-top: 18px;
border-top: 1px dotted #dce7eb;
}
ul li:nth-of-type(1) {
animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
animation-delay: 1s;
}
ul li:last-of-type {
padding-bottom: 0;
}
ul li i {
position: absolute;
transform: translate(-6px, 0);
-webkit-transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #ff6873;
width: 3px;
height: 9px;
}
ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
-webkit-transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
-webkit-transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=radio] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
}
ul li input[type=radio]:not(:checked) ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
-webkit-transform: translate(0, 50%);
}
ul li input[type=radio]:not(:checked) ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=radio]:not(:checked) ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
-webkit-transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
-webkit-transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
-webkit-transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
-webkit-transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
-webkit-transform-origin: top center;
-webkit-transform: rotateX(0deg);
}
}
</style>
</head>
<body>
<h1>CSS + HTML only Accordion Element</h1>
<ul>
<li>
<input id="lol" type="radio" name="accord" checked="checked" />
<i></i>
<h2>Languages Used</h2>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
</li>
<li>
<input type="radio" name="accord" />
<i></i>
<h2>How it Works</h2>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the radio input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
</li>
<li>
<input type="radio" name="accord" />
<i></i>
<h2>Points of Interest</h2>
<p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>
<!--
<script type="text/javascript">
function lolol() {
document.getElementById("lol").click();
}
</script>
<input type="button" value="check" onclick="lolol();" />
<script style='display: none;'>
var __links = document.querySelectorAll('a');
function __linkClick(e)
{
parent.window.postMessage(this.href, '*');
};
for (var i = 0, l = __links.length; i < l; i++)
{
if (__links[i].getAttribute('target') == '_blank')
{
__links[i].addEventListener('click', __linkClick, false);
}
}
</script>
-->
</body>
</html>
无线电按钮试验
.过渡，p，ul li i:之前，ul li i:之后{
过渡：所有0.25秒缓进缓出；
}
.flipIn，h1，ul li{
动画：翻转0.5s，使两者都轻松；
}
.否选择，h2{
-webkit点击突出显示颜色：透明；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
html{
宽度：100%；
身高：100%；
前景：900人；
溢出y：滚动；
背景色：#dce7eb；
字体系列：“提香网”，无衬线；
颜色：rgba（48,69,92,0.8）；
}
身体{
最小高度：0；
显示：内联块；
位置：相对位置；
左：50%；
利润率：90px0；
转换：转换（-50%，0）；
-webkit转换：转换（-50%，0）；
盒影：0 10px 0 0#ff6873插图；
背景色：#fefffa；
最大宽度：450像素；
填充：30px；
}
@介质（最大宽度：550px）{
身体{
框大小：边框框；
变换：平移（0,0）；
-webkit转换：转换（0,0）；
最大宽度：100%；
最小高度：100%；
保证金：0；
左：0；
}
}
h1，h2{
颜色：#ff6873；
}
h1{
文本转换：大写；
字体大小：36px；
线高：42px；
字母间距：3px；
字号：100；
}
氢{
字号：26px；
线高：34px；
字体大小：300；
字母间距：1px；
显示：块；
背景色：#fefffa；
保证金：0；
光标：指针；
}
p{
颜色：rgba（48,69,92,0.8）；
字号：17px；
线高：26px；
字母间距：1px；
位置：相对位置；
溢出：隐藏；
最大高度：800px；
不透明度：1；
变换：平移（0,0）；
-webkit转换：转换（0,0）；
边缘顶部：14px；
z指数：2；
}
保险商实验室{
列表样式：无；
前景：900人；
填充：0；
保证金：0；
}
ulli{
位置：相对位置；
填充：0；
保证金：0；
垫底：4px；
填充顶部：18px；
边框顶部：1px点#dce7eb；
}
ul li：第n种类型（1）{
动画延迟：0.5s；
}
ul li：第n种类型（2）{
动画延迟：0.75s；
}
ul li：第n种类型（3）{
动画延迟：1s；
}
ulli：最后一种类型{
填充底部：0；
}
ulli i{
位置：绝对位置；
转换：转换（-6px，0）；
-webkit转换：转换（-6px，0）；
边缘顶部：16px；
右：0；
}
前，后{
内容：“；
位置：绝对位置；
背景色：#ff6873；
宽度：3倍；
高度：9px；
}
ulli i：之前{
变换：平移（-2px，0）旋转（45度）；
-webkit变换：平移（-2px，0）旋转（45度）；
}
ulli i：之后{
变换：平移（2px，0）旋转（-45度）；
-webkit变换：平移（2px，0）旋转（-45度）；
}
ul li输入[类型=无线电]{
位置：绝对位置；
光标：指针；
宽度：100%；
身高：100%；
z指数：1；
不透明度：1；
}
ul li输入[类型=无线电]：未（：选中）~p{
边际上限：0；
最大高度：0；
不透明度：0；
转换：翻译（0,50%）；
-webkit转换：翻译（0,50%）；
}
ul li输入[类型=无线电]：未（：选中）~i:之前{
变换：平移（2px，0）旋转（45度）；
}
ul li输入[类型=无线电]：未（：选中）~i:之后{
变换：平移（-2px，0）旋转（-45度）；
-webkit变换：平移（-2px，0）旋转（-45度）；
}
@关键帧向下翻转{
0% {
不透明度：0；
变换原点：顶部中心；
变换：rotateX（-90度）；
-webkit变换：rotateX（-90度）；
}
5% {
不透明度：1；
}
80% {
变换：rotateX（8度）；
-webkit变换：rotateX（8度）；
}
83% {
变换：旋转（6度）；
-webkit变换：rotateX（6度）；
}
92% {
变换：rotateX（-3deg）；
-webkit变换：rotateX（-3deg）；
}
100% {
ul li input[type=checkbox]:unchecked ~ p {
ul li input[type=checkbox]:checked ~ p {
<!DOCTYPE html>
<html class=''>
<head>
<title>Radiobutton-Test</title>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style type="text/css" media="all">
.transition, p, ul li i:before, ul li i:after {
transition: all 0.25s ease-in-out;
}
.flipIn, h1, ul li {
animation: flipdown 0.5s ease both;
}
.no-select, h2 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
width: 100%;
height: 100%;
perspective: 900;
overflow-y: scroll;
background-color: #dce7eb;
font-family: "Titillium Web", sans-serif;
color: rgba(48, 69, 92, 0.8);
}
body {
min-height: 0;
display: inline-block;
position: relative;
left: 50%;
margin: 90px 0;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #ff6873 inset;
background-color: #fefffa;
max-width: 450px;
padding: 30px;
}
@media (max-width: 550px) {
body {
box-sizing: border-box;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1, h2 {
color: #ff6873;
}
h1 {
text-transform: uppercase;
font-size: 36px;
line-height: 42px;
letter-spacing: 3px;
font-weight: 100;
}
h2 {
font-size: 26px;
line-height: 34px;
font-weight: 300;
letter-spacing: 1px;
display: block;
background-color: #fefffa;
margin: 0;
cursor: pointer;
}
p {
color: rgba(48, 69, 92, 0.8);
font-size: 17px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
}
ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 4px;
padding-top: 18px;
border-top: 1px dotted #dce7eb;
}
ul li:nth-of-type(1) {
animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
animation-delay: 1s;
}
ul li:last-of-type {
padding-bottom: 0;
}
ul li i {
position: absolute;
transform: translate(-6px, 0);
-webkit-transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #ff6873;
width: 3px;
height: 9px;
}
ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
-webkit-transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
-webkit-transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=radio] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
}
ul li input[type=radio]:not(:checked) ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
-webkit-transform: translate(0, 50%);
}
ul li input[type=radio]:not(:checked) ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=radio]:not(:checked) ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
-webkit-transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
-webkit-transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
-webkit-transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
-webkit-transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
-webkit-transform-origin: top center;
-webkit-transform: rotateX(0deg);
}
}
</style>
</head>
<body>
<h1>CSS + HTML only Accordion Element</h1>
<ul>
<li>
<input id="lol" type="radio" name="accord" checked="checked" />
<i></i>
<h2>Languages Used</h2>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
</li>
<li>
<input type="radio" name="accord" />
<i></i>
<h2>How it Works</h2>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the radio input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
</li>
<li>
<input type="radio" name="accord" />
<i></i>
<h2>Points of Interest</h2>
<p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>
<!--
<script type="text/javascript">
function lolol() {
document.getElementById("lol").click();
}
</script>
<input type="button" value="check" onclick="lolol();" />
<script style='display: none;'>
var __links = document.querySelectorAll('a');
function __linkClick(e)
{
parent.window.postMessage(this.href, '*');
};
for (var i = 0, l = __links.length; i < l; i++)
{
if (__links[i].getAttribute('target') == '_blank')
{
__links[i].addEventListener('click', __linkClick, false);
}
}
</script>
-->
</body>
</html>