• CSS伪类大全!4大类伪类详解


    你好,我是云桃桃。

    一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

    云桃桃-大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端工具”,可获取 Web 开发工具合集

    284篇原创内容-更多前端系列内容可以go公众.h:云桃桃

    后台回复“前端工具”可获取开发工具,持续更新中

    后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

    后台回复“前端电子书”可获取20+本精选电子书

    前言

    伪类(Pseudo-class)是 CSS 中一种用于选择元素特定状态或行为的选择器。它们允许我们根据用户操作、元素的位置或其他特定条件来应用样式,从而增强页面的交互性和可读性。伪类在 CSS 中具有重要的作用和用途:

    1. 用户交互状态:伪类可以根据用户的操作状态来应用样式,如:hover 用于鼠标悬停状态。

    2. 链接状态:链接伪类如:link、:visited、:hover、:active 用于控制链接在不同状态下的样式,帮助用户区分未访问链接、已访问链接以及鼠标悬停和激活链接。

    3. 子元素选择:伪类如:first-child、:last-child、:nth-child()等用于选择元素的特定子元素,方便实现对布局和内容的精确控制。

    4. 表单元素状态:伪类如:valid、:focus、:checked 等可用于控制表单元素在不同状态下的样式,增加表单的可用性和友好性。

    伪类的语法是如下(选择器:伪类),

    1. selector:pseudo-class {
    2.   property: value;
    3. }

    那我们一起来看看吧。

    4 类常见的 CSS 伪类

    一、 基本伪类

    用于选择特定状态的元素,如:link、:visited、:hover、:active、:focus。

    1. a:link {
    2.   color: blue;
    3. }
    4. a:visited {
    5.   color: red;
    6. }
    7. a:hover {
    8.   color: green;
    9. }
    10. a:active {
    11.   color: yellow;
    12. }
    13. /* 鼠标聚焦到input上的背景颜色 */
    14. input:focus {
    15.   background-color#00f;
    16. }

    不止有 a 标签可以 hover,其他元素也可以 hover,比如以下写法,也可以:

    1. /*  鼠标悬停在div上时的背景颜色 */
    2. div:hover {
    3.   background-color: yellow;
    4. }
    5. div p:hover {
    6.   background-color: yellow;
    7. }

    这个 hover 可是大有用处!比如,写出一个tb导航的 hover 的导航菜单。

    图片

    代码如下:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>伪类示例</title>
    7.     <style>
    8.       /* 全局样式 */
    9.       * {
    10.         margin: 0;
    11.         padding: 0;
    12.         box-sizing: border-box;
    13.       }
    14.       body {
    15.         padding: 20px;
    16.       }
    17.       /* 标签样式 */
    18.       .menu {
    19.         width: 100px;
    20.         color: #fff;
    21.         line-height: 40px;
    22.         background-color: #dc5757;
    23.         cursorpointer/* 鼠标悬停时显示手型 */
    24.         transition: background-color 0.3s ease;
    25.         text-align: center;
    26.       }
    27.       /* 悬停样式 */
    28.       .menu:hover {
    29.         background-color: #9f2b2b;
    30.       }
    31.       /* 菜单样式 */
    32.       .child-menu-list {
    33.         display: none;
    34.         position: absolute;
    35.         list-style-type: none;
    36.         background-color: #fff;
    37.         width: 100px;
    38.         border-radius: 5px;
    39.         box-shadow: 0px 2px 5px rgba(0000.1);
    40.       }
    41.       /* 悬停时显示菜单 */
    42.       .menu-box:hover .child-menu-list {
    43.         displayblock;
    44.       }
    45.       /* 菜单项样式 */
    46.       .child-menu-list li {
    47.         margin: 5px 0;
    48.       }
    49.       .child-menu-list li a {
    50.         displayblock;
    51.         padding: 5px 10px;
    52.         text-decoration: none;
    53.         color: #333;
    54.       }
    55.     </style>
    56.   </head>
    57.   <body>
    58.     <div class="menu-box">
    59.       <class="menu">这是导航</p>
    60.       <ul class="child-menu-list">
    61.         <li><a href="#">菜单1</a></li>
    62.         <li><a href="#">菜单2</a></li>
    63.         <li><a href="#">菜单3</a></li>
    64.       </ul>
    65.     </div>
    66.   </body>
    67. </html>

    效果如下:

    图片

    二、 结构伪类

    用于选择特定结构状态的元素。

    1. :before 和 :after 这两个伪类用于在元素的内容前后插入生成的内容,比如添加一些装饰性的内容或图标,在标题前添加引用符号、在链接后添加外部链接图标等。

    2. :first-child 和 :last-child :first-child选择器匹配其父元素的第一个子元素,:last-child选择器匹配其父元素的最后一个子元素。比如,设置列表的第一个元素的特殊样式或者下图 tb 的,最后一个元素,不需要右侧边框。

      图片

    3. :nth-child(n) 和 :nth-last-child(n) 这两个伪类选择器根据子元素在父元素中的位置选择元素,:nth-child(n)选择第 n 个子元素,:nth-last-child(n)选择倒数第 n 个子元素。比如,实现列表中间隔行样式或者每隔 3 个元素:nth-child(3n)就有特定的样式等。

    4. :nth-of-type(n) 和 :nth-last-of-type(n) 与上面的类似,不过这两个伪类选择器是基于子元素的类型进行选择,而不是在整个子元素中进行选择。比如选择表格中某一列的所有单元格、选择特定类型的列表项等。

    5. :only-child 和 :only-of-type :only-child选择器匹配没有兄弟元素的元素,:only-of-type选择器匹配其父元素中特定类型的唯一一个子元素。

    那我们来看看代码吧。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>Pseudo-class Example</title>
    7.     <style>
    8.       /* 添加装饰性内容 */
    9.       h1:before {
    10.         content'「';
    11.       }
    12.       h1:after {
    13.         content'」😆';
    14.       }
    15.       /* 设置第一个和最后一个段落的样式 */
    16.       .box1 p:first-child {
    17.         font-weight: bold;
    18.         background-color: #ffcc00;
    19.       }
    20.       .box1 p:last-child {
    21.         border-bottom: 5px solid #ee7474;
    22.       }
    23.       /* 间隔行样式 */
    24.       ul li:nth-child(3n) {
    25.         background-color: #2dcf56;
    26.       }
    27.       /* 设置第二个表格列的单元格样式 */
    28.       table tr td:nth-of-type(2) {
    29.         font-style: italic;
    30.         color: #4330ba;
    31.       }
    32.       /* 选择唯一类型的子元素 */
    33.       .box2:only-child {
    34.         border: 1px solid #333;
    35.         padding: 10px;
    36.       }
    37.     </style>
    38.   </head>
    39.   <body>
    40.     <h1>Title</h1>
    41.     <div class="box1">
    42.       <p>This is the first paragraph.</p>
    43.       <p>This is the second paragraph.</p>
    44.       <p>This is the third paragraph.</p>
    45.     </div>
    46.     <ul>
    47.       <li>Item 1</li>
    48.       <li>Item 2</li>
    49.       <li>Item 3</li>
    50.       <li>Item 4</li>
    51.       <li>Item 5</li>
    52.       <li>Item 6</li>
    53.       <li>Item 7</li>
    54.       <li>Item 8</li>
    55.       <li>Item 9</li>
    56.       <li>Item 10</li>
    57.     </ul>
    58.     <table>
    59.       <tr>
    60.         <td>Row 1, Cell 1</td>
    61.         <td>Row 1, Cell 2</td>
    62.       </tr>
    63.       <tr>
    64.         <td>Row 2, Cell 1</td>
    65.         <td>Row 2, Cell 2</td>
    66.       </tr>
    67.     </table>
    68.     <div class="box2">
    69.       <p>Only Child Element</p>
    70.     </div>
    71.   </body>
    72. </html>

    效果如下:

    图片

    这些伪类元素提供了强大的选择器功能,可以根据元素的结构状态选择目标元素,使得样式控制更加灵活和精确。

    三、否定伪类

    用于选择特定状态的元素,如:not()。

    1. /* 选择ul中除了类名为exclude的li元素 */
    2. ul li:not(.exclude) {
    3.   color#20b45e;
    4. }

    效果如下:

    图片

    四、UI 伪类

    用于选择特定 UI 状态的元素,这个通常用到 form 表单中,如:enabled、:disabled、:checked、:indeterminate。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>UI State Pseudo-classes Example</title>
    7.     <style>
    8.       /* 用于选择已启用的输入框 */
    9.       input:enabled {
    10.         border: 2px solid #008000;
    11.       }
    12.       /* 用于选择已禁用的输入框 */
    13.       input:disabled {
    14.         background-color: #f9c8c8;
    15.       }
    16.       /* 用于选择已被选中的复选框 */
    17.       input[type='checkbox']:checked {
    18.         transform: scale(2.2); /* check选中以后,放大复选框 */
    19.       }
    20.       /* 用于选择具有不确定状态的复选框,不透明度设置成 0.2 */
    21.       input[type='checkbox']:indeterminate {
    22.         opacity: 0.2;
    23.       }
    24.     </style>
    25.   </head>
    26.   <body>
    27.     <form>
    28.       <label for="username">用户名:</label>
    29.       <input type="text" id="username" name="username" placeholder="请输入用户名" required />
    30.       <br /><br />
    31.       <label for="password">电话:</label>
    32.       <input type="text" id="phone" name="phone" placeholder="请输入密码" required />
    33.       <br /><br />
    34.       <label for="password">密码:</label>
    35.       <input disabled type="password" id="password" name="password" placeholder="请输入密码" required />
    36.       <br /><br />
    37.       <label for="remember">记住我:</label>
    38.       <input type="checkbox" id="remember" name="remember" />
    39.       <br /><br />
    40.       <label for="subscribe">订阅新闻简报:</label>
    41.       <input type="checkbox" id="subscribe" name="subscribe" checked />
    42.       <br /><br />
    43.       <input type="submit" value="提交" />
    44.     </form>
    45.     <script>
    46.       // 注意:需要手动设置复选框的不确定状态,直接设置该属性不起效
    47.       document.querySelector('input[type="checkbox"]').indeterminate = true
    48.     </script>
    49.   </body>
    50. </html>

    效果如下:

    图片

    CSS 伪类注意事项

    当使用 CSS 伪类时,需要注意以下几点:

    1. 选择器的准确性: 确保选择器的准确性,避免误选或未选中目标元素。

    2. 顺序和优先级: 理解伪类的顺序和优先级,以确保样式能够按预期生效。

    3. 兼容性考虑: 部分伪类可能在低版本浏览器中不被支持(可通过前端兼容性自查工具查询:https://caniuse.com/),需要考虑兼容性问题。

    4. 语义化使用: 使用伪类时要符合语义化,遵循样式和内容分离的原则。

    5. 效果逻辑清晰: 样式的逻辑要清晰易懂,避免出现冲突或不必要的复杂性。

    这些注意点有助于提高代码的可维护性和可读性,确保样式的正确应用和一致性。

    OK,本文完。

  • 相关阅读:
    webpack优化篇(四十九):使用 webpack 进行图片压缩
    使用模拟退火(SA)和Matlab的车辆路径问题(VRP)(Matlab代码实现)
    Day54、55 进程的定义、组成、组织方式、特征
    并查集学习笔记
    从一到无穷大 #13 How does Lindorm TSDB solve the high cardinality problem?
    linux常见下载安装工具
    智能小车之测速小车原理和开发
    MYSQL(事务+锁+MVCC+SQL执行流程)理解
    TDengine 3.1.1.0 来啦!更新如下
    flash attention的CUDA编程和二维线程块实现softmax
  • 原文地址:https://blog.csdn.net/u013179804/article/details/138199050