css伪类处理技巧记录

处理ul li的左边框或者右边框问题

我们经常会遇到一系列的list组合,要求加上,上下左右的分割线,但是这些分割线最后一个标签都不需要加分割线
我之前最常用的做法就是先给每个li加上下边框,然后给最后一个去掉下边框

<style>
	.li{
          width: 200px;
          border-bottom: 1px solid #000;
        }
        .li:last-child{
          border-bottom: none;
        }
</style>
<ul>
        <li class="li">list1</li>
        <li class="li">list2</li>
        <li class="li">list3</li>
        <li class="li">list4</li>
      </ul>

后来,看到别人写的代码,利用css伪类,不是最后一个

.li:not(:last-child){
          width: 200px;
          border-bottom: 1px solid #000;
        }

一个样式直接搞定,真香

css进度条控制

这里参考了张旭鑫的博客地址
使用css变量+伪类

.bar{
            height:20px;
            width:300px;
            background-color:#f5f5f5;
            border-radius: 10px;
        }

        .bar::before
        {
            display: block;
            counter-reset:progress var(--percent);//css属性,定义一个counter值,progress是自定义的名字
            content:counter(progress)'%\2002';// counter(progress) 使用counter的值,‘\2002’代表空格
            width:calc(1% * var(--percent));
            color:#fff;
            background-color:#2486ff;
            text-align:right;
            white-space: nowrap;
            overflow: hidden;
            border-radius: 10px;
        }
<div class="bar" style="--percent: 60"></div>

在这里插入图片描述
按照传统css写法,需要两个div,一个展示下面的div,另一个控制上层的进度,现在一个css就搞定了

按钮点击有阴影框效果

博客上给出的是详细的思路还有实现方法,在这里我把它们放在了htm中,改动了一小点地方,在此记录一下怕后续会忘记

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>css伪类测试</title>
    </head>

    <style>
          html,
          body {
            width: 100%;
            height: 100%;
            /* max-width: 750px;
            margin: auto; */
          }


          .btn {
            position: absolute;
            left: 30%;
            bottom: -20%;
            width: 40%;
            text-align: center;
            height: 12%;
            font-size: xx-large;
          }
          .bar{
            height:20px;
            width:300px;
            background-color:#f5f5f5;
            border-radius: 10px;
        }

        .bar::before
        {
            display: block;
            counter-reset:progress var(--percent);
            content:counter(progress)'%\2002';
            width:calc(1% * var(--percent));
            color:#fff;
            background-color:#2486ff;
            text-align:right;
            white-space: nowrap;
            overflow: hidden;
            border-radius: 10px;
        }
        .root{
          width: 100px;
          height: 50px;
          position: relative;
        }
        .btn{
          background: blue;
          color: #fff;
          font-size: 14px;
          outline: 0;
          border: 0;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          padding: 0;
          user-select: none;
          cursor: unset;
        }
        .btn:not([disabled]):active::after{
          transform: translate(-50% ,-50%) scale(0);
          opacity: .3;
          transition: 0s;
        }
        .btn::after{
          content: "";
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          left: var(--offsetx,0);
          top: var(--offsety,0);
          pointer-events: none;
          background-image: radial-gradient(circle, currentcolor 10%, transparent 10.01%);
          background-repeat: no-repeat;
          background-position: 50%;
          transform: translate(-50%,-50%) scale(10);
          opacity: 0;
          transition: transform .3s, opacity .8s;
        }
        .li:not(:last-child){
          width: 200px;
          border-bottom: 1px solid #000;
        }

    </style>

    <body>
      <ul>
        <li class="li">list1</li>
        <li class="li">list2</li>
        <li class="li">list3</li>
        <li class="li">list4</li>
      </ul>
        <label> 图片1</label>

        <div class="bar" style="--percent: 60"></div>
        <label> 图片2</label>

        <div class="bar" style="--percent: 40"></div>
        <label> 图片3</label>

        <div class="bar" style="--percent: 20"></div>
        <div class="root">
          <button class="btn">删除</button>
        </div>
        
    </body>

    <script>
      /**

 * @author zhangxinxu(.com)

 * @description 点击页面任意位置,标记坐标位置

 */

  document.addEventListener('mousedown',function(event) {
        var target = event.target ;
        var body = document.body ;
        var html = document.documentElement;
        // 设置自定义属性值

        body.style.setProperty( '--pagex' , event.pageX +'px');
        body.style.setProperty( '--pagey' , event.pageY+'px' );

        html.style.setProperty( '--clientx' , event.clientX +'px');
        html.style.setProperty( '--clienty' , event.clientY+'px' );

        html.style.setProperty( '--scrolly' , window.pageYOffset+'px' );

        target.style.setProperty( '--offsety' , event.offsetY+'px' );
        target.style.setProperty( '--offsetx' , event.offsetX+'px' );

        console.log(target.parentElement)
        if(target.parentElement){
          target.parentElement.style.setProperty( '--target-width' , target.clientWidth+'px' );
          target.parentElement.style.setProperty( '--target-height' , target.clientHeight+'px' );
          target.parentElement.style.setProperty( '--target-left' , target.offsetLeft+'px' );
          target.parentElement.style.setProperty( '--target-top' , target.offsetTop+'px' );
        }
      });

    </script>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值