css伪元素&伪类的妙用

:hover和:focus显示浮层      hover是鼠标晃过   focus是元素聚焦时       +：紧邻的下一个兄弟选择器   ~：所有的后面兄弟选者器

 css

img{
        visibility: hidden;
        position: absolute;
        transition: visibility .2s;  /** 设置延时 **/
    }
    a:hover + img,
    img:hover{
        visibility: visible;
    }

html

<a href="javascript:;">图片链接</a>
<img src="./images/1.jpg" alt="">

在移动端时，没有鼠标，需要用focus伪类选者器来实现

a:focus + img,
img:focus{
    visibility: visible;
    transition: none;
}

 

纯CSS实现下拉列表（二级菜单）

事实上，在下拉列表中。我不建议使用“非父子关系的并列元素” —— 如果你只是单纯的使用css的话。问题就出在focus上：:focus 只有在当前元素处于聚焦状态时才匹配。那么，这就需要一系列方案去单纯的解决这个问题，比如上面设置transition延时就是为了这个效果。但其实这还是“不算问题的问题”：因为浏览器支持了新规范：:focus-within，它规定“在当前元素或是当前元素的任意子元素处于聚焦状态时都会匹配”！它本质上是一种“父选择器行为”：

css

.cs-list{
        display: none;
        position: absolute;
        border: 1px solid red;
        background-color: #fff;
    }
    .y-table:focus-within .cs-list{
        display: block;
    }

 

html

    
<div class="y-table">
    <a href="javascript:;" class="y-msg">我的消息</a>
    <div class="cs-list">
         <a href="javascript:;">我的回答</a>
         <a href="javascript:;">我的私信</a>
         <a href="javascript:;">我的订单</a>
         <a href="javascript:;">我的关注</a>
         <a href="javascript:;">我的收藏</a>
     </div>
</div>

 

::after和::before的场景   比较常用，但是这个loading效果挺不错的，记录一下

css

.loading{
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        border-radius: 50%;
        border-top:5px solid #ff0000;
        position: relative;
        animation:a1 1s linear infinite;
    }
    .loading::before,.loading::after{
        content: "";
        width: 100px;
        height: 100px;
        position: absolute;
        left:0;
        top:-5px;
        box-sizing: border-box;
        border-radius: 50%;
    }
    .loading::before{
        border-top:5px solid #10AEFF;
        transform: rotate(120deg);
        /* 顺时针旋转120度 */
    }
    .loading::after{
        border-top:5px solid #5456db;
        transform: rotate(240deg);
        /* 顺时针旋转240度 */
    }
    .loading span{
        position: absolute;
        width: 100px;
        height: 100px;
        font-size:13px;
        color:#000;
        text-align: center;
        line-height: 100px;
        animation: a2 1s linear infinite;

    }
    @keyframes a1{
        to{
            transform: rotate(360deg);
        }
    }
    @keyframes a2{
        to{
            transform: rotate(-360deg);
        }
    }

 

html

<div class="loading">
    <span>loading...</span>
</div>

效果

 

 

 

 

 

 

 

。