发表于： 2019-03-15 22:29:10
2 716
今天完成：
在没有js的情况下使用css的checked选择器进行点击事件这个思路左右就有了，但是今天做的时候才想到一个问题，选择器这个东西只能用在自己或者同级元素上，这就很麻烦了，这里找了很久，最后才发现可以用label绑定input来进行控制，这个方法确实很巧妙，之前用label的时候确实没想到还能这样用。
input:checked ~ label ：相邻同胞选择器，选择被选中的input标签后 所有的label标签［input 和 label标签有共同的父元素］；
input:checked ＋ label ：相邻同胞选择器，选择被选中的input标签后 第一个label标签［input 和 label标签有共同的父元素］；
</head>
<body>
<input id="checked-input" type="checkbox">
<header>
<label for="checked-input"></label>
<div></div>
<div></div>
<div></div>
</header>
<main>
<div></div>
<div></div>
<div></div>
</main>
</body>
如上所示，将一个input放置于header和main外面，然后把想要作为checked触发器label放置于相应的header或者main中，并将input默认样式清除，此时input高度为零是无法选中并且不占高度的，与之绑定的label就变成了唯一能触发input的触发器。此时就可以设置checked触发，如下所示
<style>
input:checked ~ header {
background-color: #000;
}
input:checked ~ main {
background-color: #fff;
}
</style>
这里采用匹配选择器和checked选择器组合，这样就能产生点击label触发器，并触发header和main元素改变的效果。
明日计划：
初步看了下深度思考，确实比较深度，这就先不纠结，先在接下来的周六周日把剩下的css任务完成，赶紧进入js阶段。
返回列表
评论