码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 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. /* ul>li:not(:nth-child(3)){color: green;} */
    17. /* ul>li:not(:nth-of-type(3)){color: green;} */
    18. /* li:nth-child(1) {
    19. color: pink;
    20. } */
    21. /* li:nth-of-type(1){
    22. background-color: red;
    23. } */
    24. li:not(:first-of-type){
    25. font-size: 50px;
    26. }
    27. style>
    28. head>
    29. <body>
    30. <h1>沁园春·雪h1>
    31. <h3>毛泽东h3>
    32. <ul>
    33. <span>测试span>
    34. <p>北国风光,千里冰封,万里雪飘。p>
    35. <li>望长城内外,惟余莽莽;大河上下,顿失滔滔。li>
    36. <li>山舞银蛇,原驰蜡象,欲与天公试比高。li>
    37. <li>须晴日,看红装素裹,分外妖娆。li>
    38. <li>江山如此多娇,引无数英雄竞折腰。li>
    39. <li>惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。li>
    40. <li>一代天骄,成吉思汗,只识弯弓射大雕。li>
    41. ul>
    42. body>
    43. html>

  • 相关阅读:
    让你的Nginx支持分布式追踪opentracing
    linux入门到精通-第二十章-bufferevent(开源高性能事件通知库)
    nginx —— win下搭建nginx - hls服务,使用FFmpeg进行rtmp/http/m3u8推拉流
    谷歌宣布:今年将Android 12L系统交付于三星、联想和微软
    ASP.NET Core 6框架揭秘实例演示[07]:文件系统
    FreeRTOS源码阅读笔记1--task.c
    【C/C++】GCC vs. G++:C 与 C++ 编译器的差异和比较
    Kotlin 协程
    【数据结构】单链表的增删查改
    C++向量夹角公式(带正负)
  • 原文地址:https://blog.csdn.net/csgojingyu/article/details/134534293
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号