老规矩,先把代码给大家,拿去粘贴直接用,无需引用,不好用评论底下随便喷,我一条一条看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background-color: #eee}
input{display: none;}
label{position: relative;display: block;width: 70px;height: 30px;text-align: center;line-height: 30px;margin:10px;cursor: pointer;border: 1px #000 solid;z-index: 3;}
#int1+label{background-color: red}
#int2+label{background-color: pink}
#int3+label{background-color: orange}
div{width: 100%;height: 100%;position:absolute;top:0px;left:0px;}
#int1:checked+label+div{background-color: red}
#int2:checked+label+div{background-color: pink}
#int3:checked+label+div{background-color: orange}
</style>
</head>
<body>
<input type="radio" name="only" id="int1">
<label for="int1"></label>
<div></div>
<input type="radio" name="only" id="int2" checked>
<label for="int2"></label>
<div></div>
<input type="radio" name="only" id="int3">
<label for="int3"></label>
<div></div>
</body>
</html>
结构说一下,用途说一下,咱们下次再见
首先在html中搭建好input、label、div,最好是紧贴着的,比如input1、label1、div1、input2、label2、div2。。。这种,因为取名字太麻烦,这样简单省事 我把方法教给大家,添加上自己的类或id就可以随意更改使用了。
具体的样式都写在style中了,大家去看的话也是一目了然,详细的样式规则和中文释义都在上一篇博客中,链接在这里
点击蓝色字体就可以跳转至上一篇博客,大致略读就可完全了解其中内容。
强调一点,input是这样写的:
<input type="radio" name="only" id="int1">
input是单标记标签,type是类型,radio意味着单选按钮,但如何实现单选是一个重点。 规定inputtype=radio的name必须相同,否则无法实现单选。所以三个input的name都是only意为 “ 唯一 ” ;
id值用于跟label连接,实现点击label就等同于点击input的效果,为了好看,后期我们是要让input消失的
<label for="int1"></label>
本章的难点在选择器上,如果放到大网页里,那种数千行的代码,我们不能再这样写选择器,容易起冲突。
最保险的写法就是:
body>inputtype=“radio”+label+div
这句话的意思是选中body下方的直接子元素,并且它的type值等于radio,等等
这里选中的并不是它,关键在“ + ”,这是兄弟选择器符号,意为选中该input下边的第一个lable,该label下边的第一个div,最终被选中的只有div,这是重点,被选中的只有div,鼠标点击只有div的颜色才会被切换。
checked意为“默认选中”,
我给int2添加了checked就是想页面刚打开的时候不是白色,有一个默认值。
CSS中的checked意义不同,意为此时被选中,那么我执行…