前端 CSS

CSS中的伪类，应用场景？遮罩层与超链接样式

Posted by wantingtr on May 1, 2019

很久没写博客了…这段时间一直在准备各种面试，把知识点和体系全都总结在印象笔记里, 等过一段时间在一起把所有的笔记和知识体系总结一下发上来吧~

伪类

伪类是同一个标签，根据其不同的种状态，有不同的样式。通俗的可以理解成在页面上多加了一层，这个层就是伪类，具体长什么样，在这个层的CSS里定义即可。

应用场景

伪类一个很大的应用场景就是在超链接里：

  1. link:连接平常的状态
  2. visited:连接被访问过之后
  3. hover:鼠标放到连接上的时候
  4. active:连接被按下的时候

顺序：a:link、a:visited、a:hover、a:active .

利用伪类实现遮罩层

html结构

<div class="test">
    <img src="./test.jpg" alt="" class="photo">
    <p class="text">fwfewfew</p>
    <!--p标签在获得焦点后才显示-->
</div>
  1. 利用伪类的背景色

原理： 在失去焦点时无背景色（即默认透明），得到焦点时设置背景色即可

.text {
    position: absolute;
    top: 100px;
    left: 200px;
    color: white;
    display: none;
}


.test:hover:after {
    /* 一定要设置伪类的宽高和绝对定位，默认会覆盖在原元素上面 */
    content: "";
    background: rgba(1, 1, 1, 0.7);
    top: 0;
    left: 0;
    width: 500px;
    height: 800px;
    position: absolute;
}

.test:hover .text {
    display: inline-block;
    /*把遮罩层上的元素z-index设为较大值即可*/
    z-index: 2;
}
  1. 利用伪类的透明度

原理：伪类元素失去焦点时全透明，得到焦点改变透明度即可

.test::after {
    background: rgba(1, 1, 1, 0.7);
    opacity: 0;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 800px;
}

.test:hover:after {
    content: "";
    opacity: 0.6;
}

.test:hover .text {
    display: inline-block;
    z-index: 99;
    /*把遮罩层上的元素z-index设为较大值即可*/
}

其实这两种方法原理都是一样的。

细分伪类和伪元素

常见伪类：

  • link 类似于a标签
  • visited 已被访问
  • hover 鼠标悬浮
  • active 被激活
  • focus 获得键盘输入的焦点
  • first-child
  • :nth-child()
  • lang向带有指定lang属性的元素添加样式

常见伪元素：

  • after
  • before
  • first-letter 向文本的第一个字母添加样式
  • first-line向文本的首行添加样式

区别：

  • 伪类用于向某些选择器添加特殊的效果。；
  • 伪元素本质上是创建了一个有内容的虚拟容器, 在html中是不存在的；
  • CSS3中伪类和伪元素的语法不同；
  • 可以同时使用多个伪类，而只能同时使用一个伪元素；
FRIENDS