浏览器需支持css3
-
对格子点击,格子的内容会在点和圈之间切换
-
如果有任意三个格子内容是圈,下方p标签的内容为
connected
-
如果没有三个格子内容是圈,下方p标签的内容为
not_connected
<!DOCTYPE html>
<html lang="en">
<head>
<title>css-connect-three</title>
<style>
body {
-webkit-animation: bugfix infinite 1s;
margin: 0.5em 1em;
}
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
input {
-webkit-appearance: none;
display: block;
float: left;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
padding: 0px 8px;
margin: 0;
font-family: Consolas, "Courier New", monospace;
font-size: 30pt;
}
input:nth-of-type(-n+7) {
border-top: 2px solid #ddd;
}
input:nth-of-type(7n+1) {
border-left: 2px solid #ddd;
}
input:before {
content: "·";
}
input:checked:before {
content: "○";
}
label {
display: none;
display: block;
clear: both;
}
p {
clear: both;
}
p:after {
content: "not_connected";
}
/*这下面是你要提交的CSS*/
/*input:checked ~ input:checked ~ input:checked ~ p:after {
content: "connected";
}*/
/*横*/
input:checked+input:checked+input:checked ~ p:after {
content: "connected";
}
/*竖*/
input:checked+*+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+*+input:checked ~ p:after {
content: "connected";
}
/*右斜*/
input:checked+*+*+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+*+*+input:checked ~ p:after {
content: "connected";
}
input:checked+*+*+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+*+*+input:checked ~ input:checked ~ p:after {
content: "not_connected";
}
/*左斜*/
input:checked+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+input:checked ~ p:after {
content: "connected";
}
/*这上面是你要提交的CSS*/
</style>
</head>
<body>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<p></p>
</body>
</html>