详解CSS3中的选择器（三）伪类选择器

最新推荐文章于 2024-04-14 14:25:59 发布

「已注销」

最新推荐文章于 2024-04-14 14:25:59 发布

阅读量987

点赞数

分类专栏： CSS3技术详解文章标签： css

本文链接：https://blog.csdn.net/weixin_42071117/article/details/106533519

版权

今天我为大家讲解下伪类选择器，这种选择器也是比较难以掌握的一种选择器。什么是伪类选择器呢做过Web网页开发的童鞋都经常看到css样式中有这么一种类型p:first-child { ... }，像这种带有冒号（:）标志的都是伪类选择器，有的童鞋会说了，伪元素也是冒号啊，比如 div:before {...}。诚然，为了兼容CSS3之前的版本，伪元素是允许使用单冒号的，但还是提倡使用双冒号（::）。伪类选择器也是最复杂的一种选择器，共有六大子类型：动态伪类选择器目标伪类选择器语言伪类选择器UI状

摘要由CSDN通过智能技术生成

今天我为大家讲解下伪类选择器，这种选择器也是比较难以掌握的一种选择器。

什么是伪类选择器呢

做过Web网页开发的童鞋都经常看到css样式中有这么一种类型p:first-child { ... }，像这种带有冒号（:）标志的都是伪类选择器，有的童鞋会说了，伪元素也是冒号啊，比如 div:before {...}。诚然，为了兼容CSS3之前的版本，伪元素是允许使用单冒号的，但还是提倡使用双冒号（::）。

伪类选择器也是最复杂的一种选择器，共有六大子类型：

动态伪类选择器
目标伪类选择器
语言伪类选择器
UI状态伪类选择器
结构伪类选择器
否定伪类选择器

下面我们开始一个一个讲解。

动态伪类选择器

顾名思义，动态伪类选择器是一种用户和网站交互才能体现出来的选择器。它包括两种，一种是在链接元素a中经常看到的锚点选择器，一种是用户行为选择器。

E:link-表示链接未被访问时设置的CSS样式，属于锚点伪类。
E:visited-表示链接已被用户访问过设置的CSS样式，属于锚点伪类。
E:active-元素被点击时所设置的CSS样式，属于用户行为伪类。
E:hover-鼠标停留在元素上方时所设置的CSS样式，属于用于行为伪类。
E:focus-元素获取焦点时所设置的CSS样式，属于用户行为伪类。

我们来看下面一段代码：

<!DOCTYPE html>
      <html>
        <head>
          <title>动态伪类选择器的应用</title>
          <meta charsert="utf-8">
          <style type="text/css">
            .downlaod-info {
    text-align: center;}
            .btn {
    // 普通样式
              background-color: #0074cc;
              background-image: linear-gradient(top, #0088cc, #0055cc);
              background-repeat: repeat-x;
              display: inline-block;
              border: 1px solid #cccccc;
            }
            .btn: hover {
    // 鼠标悬浮状态时的样式
              background-color:#0055cc;
              text-docoration: none;
              text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
              transition: background-position: 0.1s linear;
            }
            .btn: active {
    // 鼠标点击时的样式
              background-color: #0055cc;
              background-image

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
详解CSS3中的选择器（三）伪类选择器

今天我为大家讲解下伪类选择器，这种选择器也是比较难以掌握的一种选择器。什么是伪类选择器呢做过Web网页开发的童鞋都经常看到css样式中有这么一种类型p:first-child { ... }，像这种带有冒号（:）标志的都是伪类选择器，有的童鞋会说了，伪元素也是冒号啊，比如 div:before {...}。诚然，为了兼容CSS3之前的版本，伪元素是允许使用单冒号的，但还是提倡使用双冒号（::）。伪类选择器也是最复杂的一种选择器，共有六大子类型：动态伪类选择器目标伪类选择器语言伪类选择器UI状
复制链接

扫一扫