伪类选择器

查看代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        ul>li.first{
            color:violet;
        }
        /* 
        伪类（不存在的类，特殊的类）
            伪类用来描述一个元素的特殊状态
                比如：第一个元素、被点击的元素、鼠标移入元素...
            伪类一般情况下使用:开头
                :first-child 第一个子元素
                :last-child 最后一个子元素
                :nth-child()第n个子元素
                    n 第n个 n的范围可以是0到正无穷
                    2n或even 表示选中的偶数位的元素
                    2n+1或odd 表示选中的奇数位的元素

                以上这些伪类都是根据所有子元素进行排

            :first-of-type
            :last-of-type
            :nth-of-type
                这几个伪类的功能和上述的类似，不同点时他们是在同类型中进行排序


            :not()否定伪类
                将符合条件的元素从选择器中去除

        */

        /* ul>li:first-child{
            font-size: 30px;
        }

        ul>li:nth-child(2n){
            color: chartreuse;
        } */

        /* ul>li:first-of-type{
            color: red;
        } */

        ul>li:not(:nth-of-type(3)){
            color: tomato;
        }
    </style>
</head>
<body>
    <!-- 
        ul>li回车生成标签
        ul+ul回车两个ul
        ul>li*5回车ul中有五个li
     -->
     <!-- <ul>
         <li></li>
     </ul> -->
<!-- 
     <ul></ul>
     <ul></ul> -->

        <ul>
            <span>我是第一个</span>
            <li>第一</li>
            <li>第二</li>
            <li>第三</li>
            <li>第四</li>
            <li>第五</li>
        </ul>

        
</body>
</html>

 

超链接的伪类

查看代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        /* 
        :link表示没访问过的链接 */
       a:link{
           color: red;
       }
       /* 
       :visited用来表示访问过的链接
       由于隐私的原因，visited只能修改链接的颜色 */
       a:visited{
           color:orange;

       }

       
           /* hover用来表示鼠标移入 */
           a:hover{
            font-size: 30px;
            color:yellow;
        }

        /* 
         :active用来表示鼠标点击 */
        a:active{
            color: rebeccapurple;
        }
    </style>
</head>
<body>
  <!-- 
      1.没有访问过的链接
      2.访问过的链接
   -->
        
   <a href="https://www.baidu.com">访问过的链接</a>
   <a href="https://www.baidu123.com">没有访问过的链接</a>
</body>
</html>
posted @ 2022-04-09 19:32  Eveeee  阅读(36)  评论(0)    收藏  举报