我是有链接的a_伪元素选择器没访问的颜色">
当前位置:   article > 正文

伪元素选择器_伪类选择器_伪元素选择器没访问的颜色

伪元素选择器没访问的颜色

学的越多,没学的越多;永远不要停下前进的脚步。

8. 伪类选择器

状态行伪类:

  • a:link—选择a元素中未被访问的链接
  • a:visited—选择a元素中已被访问过的链接
  • a:hover—选择a元素中鼠标指针位于其上的链接
  • a:active—选择a元素中活动的链接(正在击中)
<div></div>
<a>我是没有链接的a</a>
<a href="">我是有链接的a</a>
  • 1
  • 2
  • 3
div{
    width: 200px;
    height: 200px;
    background-color: red;
}

/* 当鼠标在div 上时,红变蓝 */
div:hover{
    background-color: blue;
}

/* 鼠标击中,变为 粉色 */
div:active{
    background-color: hotpink;
}

/* 已被访问过的颜色 */
a:visited{
    color: lawngreen;
}

/* 未被访问时的链接 */
a:link{
    color: hotpink;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

9. 伪元素选择器

结构性伪类:

  • before和after中必须设置content(内容)和display(种类)两个样式,否则无法正确显示

    • p:before—在每个 p 元素的内容之前插入内容
    • p:after—在每个 p 元素的内容之后插入内容
  • display:修改元素种类,block(区块元素)、inline(内联元素)、inline-block(内联块元素)、none(隐藏元素,且不占用物理空间)

  • content:伪元素的内容样式,值会在页面中显示出来

<div>
    我是div内容
</div>
  • 1
  • 2
  • 3
div{
    width: 200px;
    height: 200px;
    background-color: lightpink;
}

/* 伪元素何时使用:希望页面中有一个元素结构用来显示样式或者额外消失时,用尾元素来代替 */
div::before{
    display: block;
    content: "*";
    width: 30px;
    height: 30px;
    background-color: lightseagreen;

}
div::after{
    content: "ii";
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这里插入图片描述

10. 练习

  • 当鼠标移入父元素的时候,子元素消失;移出时,子元素出现

    way1:

    <div class="parent">
        <div class="child"></div>
    </div>
    
    • 1
    • 2
    • 3
    .parent{
        width: 300px;
        height: 300px;
        background-color: limegreen;
        margin: 0 auto;
    }
    .child{
        width: 50px;
        height: 50px;
        background-color: violet;
        margin: 0 auto;
    }
    
    /* 移入时 子元素消失;移出,出现 */
    .parent:hover .child{
        display: none;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    way2:

    <div class="parent"></div>
    
    • 1
    .parent{
        width: 300px;
        height: 300px;
        background-color: violet;
        margin: 0 auto;
    }
    .parent::before{
        content: "";
        width: 100px;
        height: 100px;
        background-color: yellow;
        display: block;
    }
    .parent:hover::before{
        display: none;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号