CSS 选择器——伪类/伪元素妙用

最新推荐文章于 2024-09-10 18:52:07 发布

小栗子laity

最新推荐文章于 2024-09-10 18:52:07 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： CSS CSS3 伪类伪元素

本文链接：https://blog.csdn.net/susu_lily/article/details/88689169

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

伪类/伪元素用的好，简直炫酷，以下是我之前内部分享整理的一些内容（全部示例请查看示例包，本文只展示部分），应该也只是他们的皮毛，还有更多等待我发掘。

一、CSS 选择器

ID 选择器（#myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
派生选择器【后代选择器（li a）、子选择器（ul > li）、相邻选择器（h1 + p, h1 ~p）】
通配符选择器（*）
属性选择器（input[type=”text”]）
伪类选择器（a:hover）
伪元素选择器（div:before, div::before）

二、CSS 权重的规则

标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/ div{}
/*权重为10*/ .class1{}
/*权重为100*/ #id1{}
/*权重为100+1=101*/ #id1 div{}
/*权重为10+1=11*/ .class1 div{}
/*权重为10+10+1=21*/ .class1 .class2 div{}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。

三、CSS 伪类

伪类选择元素基于的是当前元素处于的状态，或者说是元素当前所具有的特性，而不是元素的 id/class 属性等静态的标志。由于状态是动态的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但他是基于文档之外的抽象，所以叫伪类。

CSS1

CSS2

CSS3

:link

:visited

:hover

:active

:focus

:first-child

:lang

:checked

:disabled

:empty

:enabled

:first-of-type

:in-range

:invalid

:last-child

:last-of-type

:not(selector)

:nth-child(n)

:nth-last-child(n)

:nth-last-of-type(n)

:nth-of-type(n)

:only-of-type

:only-child

:optional

:out-of-range

:read-only

:read-write

:required

:root

:target

:valid

四、CSS 伪元素

伪元素是对元素中特定内容进行操作的，它所操作的层次比伪类更深一层，也因此它的动态性比伪类要低很多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选去某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在与文档中，所以叫伪元素。

CSS1

CSS2

CSS3

::first-latter

::first-line

::before

::after

::selection

五、伪类和伪元素的异同

在CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义，而二者在语法是一样的，都是以:开头，这造成很多人会将某些伪元素误认为是伪类，如:before，:after；而在CSS3给出的定义中，二者区别更为明显，也更容易理解。

1、定义

伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target。

伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。

2、语法

在CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。

六、兼容性

:link、:visited、:hover、:active

:first-child

:foucs、:lang()

:in-range、:out-of-range

:ready-only、:read-write (支持该属性的第一个浏览器版本号)

:valid、:invalid、:required、:optional

:checked、:disabled、:empty、:enabled、:first-of-type、:last-child、:last-of-type、:not(selector)、:nth-child(n)、:nth-last-child(n)、:nth-last-of-type(n)、:nth-of-type(n)、:only-of-type、:root、:target、:only-child

::first-letter、::first-line

::before、::after

::section

七、实例

.clearfix::after {content: ‘’;display:block;clear:both;} // 清除浮动
[class^="icon-"], [class*=" icon-"] {position: relative;}
li + li {border-left: 1px solid #ccc;}
li:hover ~ li:before { left: 0;}
li:nth-child(2n){background-color: blue;color: #fff;}

示例下载链接:

CSDN https://download.csdn.net/download/susu_lily/11042098

GIT https://github.com/suLily/pseudo

实例导航本文

以下是纯 CSS 实例（先放几个）：

按钮1:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Btn</title>
  <link rel="stylesheet" type="text/css" href="../css/_reset.css">
  <style>
    body{
      background-color:#2C3437;
    }
    .btn {
      box-sizing: border-box;
      position: relative;
      margin: 50px;
      width: 192px;
      height: 192px;
      text-align:center;
      color: #fff;
      border: 3px solid rgba(255, 255, 255, .9);
      border-radius: 50%;
      float: left;
    }
    .btn::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 174px;
      height: 174px;
      border: 1px solid rgba(255, 255, 255, .6);
      border-radius: 50%;
    }
    .btn1{
      font-size: 80px;
      line-height: 192px;
    }
    .btn1::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 154px;
      height: 154px;
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 50%;
    }
    .btn2{
      padding-top: 70px;
      font-size: 30px;
      line-height: 132px;
    }
    .btn2::before {
      position: absolute;
      top:  10%;
      left: 50%;
      transform: translateX(-50%);
      content:'☾';
      font-size:100px;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div class="btn btn1">开</div>
  <div class="btn btn2">睡眠</div>
</body>
</html>

告警提示（水波）：

<div class="hdmap-popup-warn"></div>

.hdmap-popup-warn {
  position: absolute;
  top: 220px;
  left: 80px;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  box-sizing: border-box;
  background: #fc933e;

  &::before,
  &::after {
    content: "";
    box-sizing: border-box;
    display: block;
    position: absolute;
    border-radius: 50%;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  &::before {
    left: -62.5%;
    top: -62.5%;
    height: 225%;
    width: 225%;
    animation-name: upstep-first;
    background: rgba(252,147,62,.5);
    border: 1px solid rgba(254,153,72,.5);
  }
  &::after {
    left: -150%;
    top: -150%;
    height: 400%;
    width: 400%;
    background: rgba(252,147,62,.2);
    border: 1px solid rgba(254,153,72,.2);
    animation-name: upstep-second;
  }
}


@keyframes upstep-first {
  0% {
    opacity: 0
  }
  33% {
    opacity: 0
  }
  34% {
    opacity: 1
  }
  100% {
    opacity: 1
  }
}

@keyframes upstep-second {
  0% {
    opacity: 0
  }
  66% {
    opacity: 0
  }
  67% {
    opacity: 1
  }
  100% {
    opacity: 1
  }
}