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

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

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

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

    css中 ‘+’号的使用：

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

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

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Documenttitle>
    6. head>
    7. <body>
    8.    <input id="modeCheckBox" type="checkbox"> 
    9.     
    10.   <div class="content">
    11.      
    12.       <label id="modeBtn" for="modeCheckBox">点我切换label>
    13.       <h1>深浅色模式切换h1>
    14.     
    15.   div>
    16. body>
    17. html> 
    18. <style>
    19.  
    20. body,
    21.     html {
    22.       width: 100%;
    23.       height: 100%;
    24.       padding: 0;
    25.       margin: 0;
    26.       overflow: hidden;
    27.     }
    28.  
    29.     body {
    30.       box-sizing: border-box;
    31.     }
    32.  
    33.     .content {
    34.       padding: 10px;
    35.       transition: background-color 1s, color 1s;
    36.     }
    37.  
    38.     #modeCheckBox {
    39.        display: none; /*//将大盒子外面的checkbox隐藏起来 */
    40.     }
    41.  
    42.     #modeCheckBox:checked+.content { 
    43.         /* 通过 checkbox 的伪类选择器checked，点击checkbox就会触发这个伪类 */
    44.       background-color: black;
    45.       color: white;
    46.       transition: all 1s;
    47.     }
    48.  
    49.     #modeBtn {
    50.       font-size: 2rem;
    51.       float: right;
    52.     }
    53.  
    54.     #modeBtn::after {
    55.       content: '🌞';
    56.     }
    57.  
    58.     #modeCheckBox:checked+.content #modeBtn::after {
    59.       content: '🌜';
    60.     }
    61.   style>

  • 相关阅读:
    2019架构真题&案例（四十八）
    从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
    记录一次centos7增加crontab定时任务
    字符串旋转
    世界杯里的数学知识
    .NET 反向代理-YARP 根据域名转发
    太坑了吧！一次某某云上的redis读超时排查经历
    Cocos Creator3.8 项目实战（六）Combobox控件的实现和使用
    SpringCloud优化记录
    Tomcat 正确安装并启动后，浏览器访问localhost8080显示404
  • 原文地址：https://blog.csdn.net/qq_51580852/article/details/126117171