* { margin:0; padding:0; } div.tab-frame input { display:none } div.tab-frame label { display:block; float:left; padding:5px 10px; cursor:pointer } div.tab-frame input:checked+label { background:black; color:white; cursor:default } div.tab-frame div.tab { display:none; padding:5px 10px; clear:left } div.tab-frame input:nth-of-type(1):checked~.tab:nth-of-type(1),div.tab-frame input:nth-of-type(2):checked~.tab:nth-of-type(2),div.tab-frame input:nth-of-type(3):checked~.tab:nth-of-type(3) { display:block; }
div.tab-frame input:nth-of-type(1):checked~.tab:nth-of-type(1),div.tab-frame input:nth-of-type(2):checked~.tab:nth-of-type(2),div.tab-frame input:nth-of-type(3):checked~.tab:nth-of-type(3)
这一块不是很懂 应该是当div.tab-frame input:nth-of-type(n):checked 他之后的.tab:nth-of-type(n)样式display:block;的意思吧