2.2-14 伪类

最新推荐文章于 2024-09-12 19:55:46 发布

洋芋不姓杨

最新推荐文章于 2024-09-12 19:55:46 发布

阅读量101

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/youaigusheng/article/details/125539838

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

伪类

1、伪类定义

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态超级链接拥有4个特殊状态；

伪类	意义
a:link	没有被访问的超级链接
a:visited	已经被访问的超级链接
a:hover	正在被鼠标悬停的超级链接
a:active	正在被激活的超级链接（按下按键但是还没有松开按键）

2、爱恨准则

a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效；

love				 hate
:link :visited		:hover :active

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
           a:link{
             color:dodgerblue;
         }
         a:visited{
             color:darkgoldenrod;
         }
         a:hover{
             color:red;
         }
         a:active{
             font-size:50px;
         }
  </style> 
</head>
<body>
  <p>
      <a href="http://www.baidu.com">>前往百度</a>
      <a href="http://www.jd.com">>前往京东</a>
  </p>
</body>
</html>

3、新增伪类

:empty			选择空标签
:focus			选择当前获得焦点的表单元素
:enabled		选择当前有效的表单元素
:disabled		选择当前无效的表单元素
:checked		选择当前已经勾选的单选按钮或者复选框
:root 			选择根元素，即<html>标签

4、:empty

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      p{
          width:100px;
          height:100px;
          border:1px solid rgb(78, 26, 26);
      }
      p:empty{
          background-color: blue;
      }
  </style> 
</head>
<body>
      <p class="para">1</p>
      <p class="para"></p>
      <p class="para">1111</p>
      <p class="para"></p>
    
  //注空格和换行不为空
</body>
</html>