css3新增选择器

白泽的笔记

已于 2022-07-26 19:34:46 修改

阅读量117

点赞数

文章标签： html html5 css3 css

于 2022-07-04 18:54:56 首次发布

本文链接：https://blog.csdn.net/m0_51024444/article/details/125606553

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>css3新增选择器</title>
       <style type="text/css">
           ul li {
               color: red;
           }

           ul li .on {
               color: blue;
           }

           ul .on+li {
               color: aqua;
           }

           /* E+F{}
           兄弟选择器
           选择所有紧跟在 E元素之后的第一个 F 元素 */
           .span~span {
               color: aqua;
           }

           /* 通用兄弟选择器
           E~F
           选择E元素之后的每一个F元素 */
           /* input[name]{
               border: 1px solid red;
           }
           input[type="text"]{
               background-color: aqua;
           } */
           /* input[class="box"]{
               background-color: green;
           }
           选择所有使用class="box"的元素 */

           /* input[class~="box"] {
               background-color: green; }
               class属性包含单词"box"的所有元素*/
           /*
           a[href^="http:"]选择每一个href属性的值以"http:"开头的元素
           a[href$="com"]选择每一个href属性的值以"com"结尾的元素
           a[href*="www"]选择每一个href属性的值包含子字符串"www"的元素*/

           /*
           选择器的运用
           :checked
           checkbox开关 */

           /*
           方法一
           input[type="checkbox"]{
               appearance: none;
               width: 40px;
               height: 20px;
               border-radius:10px;
               border: 1px solid #ccc;
               transition: 1s;
           }
           input[type="checkbox" ]:checked{
               background-color: #55ff7f;
           }
           input[type="checkbox"]::after{
           border: 1px solid #ccc;
           display: block;
           content:"";
           width: 16px;
           height: 16px;
           border-radius: 50%;
           transition: 1s;
           }
           input[type="checkbox" ]:checked::after{
           background-color: white;
           margin-left: 20px;
           } */
           /* 方法二 */
           input[type="checkbox"] {
               position: relative;
               -webkit - appearance: none;
               /*谷歌，苹果safori */
               - moz - appearance: none;
               /”火城firefox ff */ -0- appearance: none;
               /*欧朋opera */
               - ms- appearance: none;
               /*ie*/
               appearance: none;
               width: 80px;
               height: 40px;
               border-radius: 20px;
               border: 1px solid #222;
               transition: .5s;
           }

           input[type="checkbox"]::after {
               position: absolute;
               left: 1px;
               top: 1px;
               display: block;
               content: "";
               width: 36px;
               height: 36px;
               border-radius: 50%;
               background-color: #fff;
               box-shadow: 0 0 3px #000000;
               transition: .5s;
           }

           input[type="checkbox"]:checked {
               background-color: #2de;
           }

           input[type="checkbox"]:checked::after {
               left: 41px;
           }

           input[type="checkbox"]+label {
               display: inline-block;
               position: relative;
               width: 40px;
               height: 40px;
           }
           input[type="checkbox"]+label span{
               position: absolute;
               left: 0;
               top: 6px;
           }
           input[type="checkbox"]+label .off{
               opacity: 1;
           }
           input[type="checkbox"]+label .on{
               opacity: 0;
           }
           input[type="checkbox"]:checked+label .off{
               opacity: 0;
           }
           input[type="checkbox"]:checked+label .on{
               opacity: 1;
           }

           /* input[type="checkbox"]+label {
               background-color: #CCC;
           }

           input[type="checkbox"]:checked+label {
               background-color: red;
           } */
           /* 单选框的运用 */
           input[type="radio"]{
               display: none;
           }
           input[type="radio"]+label{
               display: inline-block;
               width: 200px;
               height: 200px;
               background-size:contain;
               background-image: url('img/01.jpg');
           }
           input[type="radio"]:checked+label[for="male"]{
               background-image: url('img/10.jpg');
           }
           input[type="radio"]:checked+label[for="famale"]{
               background-image: url('img/09.jpg');
           }

       </style>
   </head>
   <body>
       <ul>
           <li class="on">列表1</li>
           <li>列表2</li>
           <li>列表3</li>
           <li>列表4</li>
           <p class="on">列表1</p>
       </ul>
       <div class="list">
           <span>内容1</span>
           <span>内容2</span>
           <span>内容2</span>
           <span class="span">np</span>
           <span>内容2</span>
           <span>内容2</span>
           <span>内容2</span>
           <span>内容2</span>
           <span>内容2</span>
       </div>
       <input type="text" name="name" class="box">
       <input type="password" name="pwd" id="" class="box item">
       <input type="checkbox" name="" id="btn" value="" />
       <label for="btn">
           <span class="off">关闭</span>
           <span class="on">开启</span>
       </label><br />
       <input type="submit" value="提交">
       <a href=""></a>
       <a href=""></a><br><br>
       <input type="radio" name="nax" id="male">
       <label for="male"></label>
       <input type="radio" name="nax" id="famale">
       <label for="famale"></label>
   </body>
</html>