通过点击CheckBox实现背景变换小案例

今天给大家介绍一个例子，例子是实现背景的切换的，这里通过使用input标签中的checkbox中的checked实现，我觉得还是一个不错的例子，分享给大家。

在看代码之前先介绍一些知识点:

CheckBox的伪类选择器：checked伪类仅仅适用于单选按钮或则复选框，所以如果在其他类型的元素定义checked伪类，checked会失效。

css中 ‘+’号的使用：

二者有相同的父元素，
选择紧接在另一个元素后的元素，即是相邻的选择器

总结上面两点，当checked伪类选择器和+配合使用时：+ 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。也可以理解为在为类选择器选择的时候，使用原始的input：checked+class/label（每当选中时，改变其后class/label中的内容样式）

本案例通过点击checkbox实现选择效果，点击了第一下表示选中了这个id叫modeCheckBox的多选框，此时显示黑夜，内容为月亮标记，再点一下表示取消选择，恢复为默认的太阳。

OK知识点介绍完毕，下面你们就直接copy代码去浏览器上面跑一跑吧，感受一下css的奇妙


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
   <input id="modeCheckBox" type="checkbox"> 
    
  <div class="content">
     
      <label id="modeBtn" for="modeCheckBox">点我切换label>
      <h1>深浅色模式切换h1>
    
  div>
body>
html> 
<style>
 
body,
    html {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
 
    body {
      box-sizing: border-box;
    }
 
    .content {
      padding: 10px;
      transition: background-color 1s, color 1s;
    }
 
    #modeCheckBox {
       display: none; /*//将大盒子外面的checkbox隐藏起来 */
    }
 
    #modeCheckBox:checked+.content { 
        /* 通过 checkbox 的伪类选择器checked，点击checkbox就会触发这个伪类 */
      background-color: black;
      color: white;
      transition: all 1s;
    }
 
    #modeBtn {
      font-size: 2rem;
      float: right;
    }
 
    #modeBtn::after {
      content: '🌞';
    }
 
    #modeCheckBox:checked+.content #modeBtn::after {
      content: '🌜';
    }
  style>

相关阅读:
SQL入门习题集——初级39题
智慧公厕有多智能？智慧厕所黑科技揭秘
【手写数据库toadb】SQL字符串如何被数据库认识？词法语法分析基础原理，常用工具
SparkSQL的UDF及分析案例，220726，，
用DIV+CSS技术设计的数码购物商城网站（web前端网页制作课作业）
动态规划解决leetcode上的两道回文问题（针对思路）
实战java高并发程序设计(第2版)学习(1-3)
springboot基于Java的多元化智能选课系统毕业设计源码040909
2022Java后端，Java 多线程50问你会几问？
微软S2C2F框架已被OpenSSF开源安全体系采用

原文地址：https://blog.csdn.net/qq_51580852/article/details/126117171