伪元素选择器_伪类选择器

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

8. 伪类选择器

状态行伪类：

• a:link—选择a元素中未被访问的链接
• a:visited—选择a元素中已被访问过的链接
• a:hover—选择a元素中鼠标指针位于其上的链接
• a:active—选择a元素中活动的链接(正在击中)

<div></div>
<a>我是没有链接的a</a>
<a href="">我是有链接的a</a>

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;
}

9. 伪元素选择器

结构性伪类：

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

  • p:before—在每个 p 元素的内容之前插入内容
  • p:after—在每个 p 元素的内容之后插入内容

• display：修改元素种类，block(区块元素)、inline(内联元素)、inline-block(内联块元素)、none(隐藏元素，且不占用物理空间)

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

<div>
    我是div内容
</div>

div{
    
    
    width: 200px;
    height: 200px;
    background-color: lightpink;
}

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

}
div::after{
    
    
    content: "ii";
}

10. 练习

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

  way1:

  <div class="parent">
      <div class="child"></div>
  </div>
  

  .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;
  }
  

  way2:

  <div class="parent"></div>
  

  .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;
  }