• css选择器(通配符、（元素、类、id）、后代（子代、所有后代）、兄弟（相邻兄弟、所有兄弟）、属性（属性、指定值的属性）、交集并集)

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>选择器总结</title>
    9.     <style>
    10.         /* 1. 简单 元素 类 id（id是唯一） */
    11.  
    12.         /* 元素 */
    13.         div {
    14.             background-color: pink;
    15.         }
    16.  
    17.         /* 类 */
    18.         .box2 {
    19.             background-color: yellow;
    20.         }
    21.  
    22.         /* id */
    23.         #id {
    24.             background-color: green;
    25.         }
    26.  
    27.         /* 2. 属性 */
    28.  
    29.         /* 选择属性 */
    30.         [title] {
    31.             background-color: yellow;
    32.         }
    33.  
    34.         /* 选择指定值的属性 */
    35.         [title=span] {
    36.             background-color: green;
    37.         }
    38.  
    39.         /* 3. 后代 */
    40.  
    41.         /* 选择所有后代 */
    42.         .father span {
    43.             background-color: #f00;
    44.         }
    45.  
    46.         /* 选择子代 */
    47.         .father>span {
    48.             background-color: green;
    49.         }
    50.  
    51.         /* 4. 交集 并集 */
    52.  
    53.         /* 交集 */
    54.         div.box3 {
    55.             background-color: yellow;
    56.         }
    57.  
    58.         /* 并集 */
    59.         div.box3,
    60.         div.box4 {
    61.             background-color: green;
    62.         }
    63.  
    64.         /* 5. 兄弟 */
    65.  
    66.         /* 相邻兄弟 */
    67.         #box5.brother+div {
    68.             background-color: pink;
    69.         }
    70.         
    71.         /* 全部兄弟 */
    72.         #box5.brother~div{
    73.             background-color: green;
    74.         }
    75.     </style>
    76. </head>
    77.  
    78. <body>
    79.     <div class="box">
    80.         <!-- 简单 -->
    81.         <div>元素</div>
    82.         <div class="box2">类</div>
    83.         <div id="id">id</div>
    84.  
    85.         <!-- 属性 -->
    86.         <span title="title">title</span>
    87.         <span title="span">title=span</span>
    88.  
    89.         <!-- 后代 domTree -->
    90.         <div class="father">
    91.             <span>span1</span>
    92.             <div><span>span2</span></div>
    93.             <div><span>span3</span></div>
    94.         </div>
    95.  
    96.         <!-- 交集 并集 -->
    97.         <div class="box3">.</div>
    98.         <div class="box4">,</div>
    99.  
    100.         <!-- 兄弟 -->
    101.         <div id="box5">
    102.             <div class="brother">1</div>
    103.             <div>2 相邻</div>
    104.             <div>3</div>
    105.             <div>4</div>
    106.         </div>
    107.  
    108.     </div>
    109. </body>
    110.  
    111. </html>

    复制代码在本地调试即可学习到这些内容：

    包括以下内容

    1. 利用*选择出所有元素

    2. 利用 元素、类名、id 选择出指定的元素

    3. 利用 [属性名]、[属性名=属性值] 选择指定的元素

    4. 利用 “空格”、“>” 选择子代或者所有后代的元素

    5. 利用 “+”、“~” 选择相邻兄弟或者所有兄弟的元素

    6. 利用 紧贴、“，” 选择交集或者并集的元素

    css选择器很重要，大家要好好学

    目录

    通配符

    简单

    属性

    后代

    兄弟

    交集 并集

    伪类 常见的伪类

    动态伪类

  • 相关阅读:
    本地部署多语言代码生成模型CodeGeeX2
    在阿里干了6年自动化测试，30岁即将退休的我，告诉你自动化测试工程师有多吃香...
    基于Docker构建MySQL主从复制数据库
    python基础——基础语法
    Elasticsearch from/size-浅分页查询-深分页 scroll-深分页search_after深度查询区别使用及应用场景
    Vue中常见的loader的作用
    设计模式系列之MVC模式
    CSRF及SSRF详解
    linux 环境变量种常用 path 说明
    Placement Rules 使用文档
  • 原文地址：https://blog.csdn.net/m0_59755550/article/details/126796493