• CSS中常用的伪类选择器

    一 、伪类（不存在的类，特殊的类）

    -伪类用来描述一个元素的特殊状态

    比如：第一个元素，被点击的元素，鼠标移入的元素···

    -特点：一般请情况下，使用：开头

    1、 :first-child 第一个子元素

    2、 :last-child 最后一个子元素

            3、 :nth-child() 选中第n个子元素

                    特殊值： n 所有的

                    2n或even 选中偶数

                    2n+1或odd 选中奇数

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

    1、:first-of-type

    2、:last-of-type

    3、:nth-of-type()

    功能跟上面相似，

    —不同的是，这是在同类型的子元素中去选择

    二、:not() 否定伪类

    -将符合条件的元素从选择器中去除

    以下为代码演示
     

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style>
    9.       /*去掉项目符号*/
    10.       ul {
    11.         list-style: none;
    12.       }
    13.       /* 需求一：将ul里的第一个li自动一直设置为红色 */
    14.       /* ul>li:first-child{color:red} */
    15.       /* ul>li:last-child{color:blue} */
    16.  
    17.       /* ul>li:not(:nth-child(3)){color: green;} */
    18.       /* ul>li:not(:nth-of-type(3)){color: green;} */
    19.       /* li:nth-child(1) {
    20.         color: pink;
    21.       } */
    22.       /* li:nth-of-type(1){
    23.         background-color: red;
    24.       } */
    25.       li:not(:first-of-type){
    26.         font-size: 50px;
    27.       }
    28.     style>
    29.   head>
    30.   <body>
    31.     <h1>沁园春·雪h1>
    32.     <h3>毛泽东h3>
    33.     <ul>
    34.       <span>测试span>
    35.       <p>北国风光，千里冰封，万里雪飘。p>
    36.       <li>望长城内外，惟余莽莽；大河上下，顿失滔滔。li>
    37.       <li>山舞银蛇，原驰蜡象，欲与天公试比高。li>
    38.       <li>须晴日，看红装素裹，分外妖娆。li>
    39.       <li>江山如此多娇，引无数英雄竞折腰。li>
    40.       <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。li>
    41.       <li>一代天骄，成吉思汗，只识弯弓射大雕。li>
    42.     ul>
    43.   body>
    44. html>

  • 相关阅读:
    手写简单的mybatis框架
    CleanMyMac X2022软件包最新mac电脑系统清洁器
    【Ubuntu】创建C++运行环境
    第三代高级语言
    mac flutter pb解析报错：protoc-gen-dart: program not found or is not executable
    Verilog HDL阻塞赋值和非阻塞赋值笔记
    SpringBoot自定义注解
    C++指针解读（4）-- 指针和数组（一维数组）
    6R机械臂运动规划及仿真
    分布式事务（五）———可靠消息队列解决方案
  • 原文地址：https://blog.csdn.net/csgojingyu/article/details/134534293