伪类选择器

一什么是伪类？

伪类用于定义元素的特殊状态。同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

 

二伪类分类

 

（1）静态伪类：只能用于超链接的样式。如下：

  • :link 超链接点击之前
  • :visited 链接被访问过之后

PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

  • :hover “悬停”：鼠标放到标签上的时候
  • :active “激活”： 鼠标点击标签，但是不松手时。
  • :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点超链接a标签

  • 超链接的四种状态

    a标签有4种伪类（即对应四种状态），要求背诵。如下：

  • :link “链接”：超链接点击之前
    • :visited “访问过的”：链接被访问过之后
    • :hover “悬停”：鼠标放到标签上的时候
    • :active “激活”： 鼠标点击标签，但是不松手时。

三小案例

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

 四实际运用

这里提供一个案例，鼠标悬停在div1时div4背景图片修改，div1，div2，div3变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     #div1{
        width:300px;
        height:300px;
        background: red;
         background: url(//12635950.s61i.faiusr.com/2/AD0Irp6DBhACGAAg8viKxAUoo_fCzwUwgA84zAg.jpg) no-repeat top;
    }
     #div1:hover{
         background: black;
     }
     #div2{
         width:100px;
         height:100px;
         background: green;
     }
     #div1:hover>#div2{
         background: blue;
     }
     #div3{
         width:50px;
         height:50px;
         background: pink;
     }
     #div1:hover #div3{
         background: yellow;
     }
     #div4{
         width:200px;
         height:200px;
         background: lightcoral;
     }
      #div1:hover+#div4{
          background: lightgreen;
          background: url(//12635950.s61i.faiusr.com/2/AD0Irp6DBhACGAAgmImP2wUontfUkgYwgA84zAg.jpg) no-repeat;


      }
      /*}如果是同级，必须是紧邻的弟弟，不能有span等元素或空白行，否则不起作用*/
    </style>

</head>
<body>
  <div id="div1">
      <div id="div2">
          <div id="div3">
          </div>
      </div>
  </div>
<div id="div4"></div>
<!--<div id="div5"></div>-->

</body>
</html>

 

posted @ 2021-11-14 17:08  蘑菇萌萌哒  阅读(332)  评论(0)    收藏  举报