css基本选择器以及上下文选择器使用示例

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
css基本选择器以及上下文选择器使用示例1. 元素样式来源
  1. 预定义(浏览器默认的)
  2. 自定义(用户自己写的)
  3. 继承样式(简化,例如字体,字号,前景色)
2. 自定义样式类型
  1. 行内样式：ele.style,当前元素
  2. 文档样式：<style>,当前文档
  3. 外部样式：xxx.css,引用它的文档

优先级：
行内样式 > 文档样式 > 外部样式。
important 最高优先级

3. 选择器

根据元素的基本特征，定位元素
元素 = 标签 + 属性

3.1 基本选择器
  1. 标签选择器
  2. 属性选择器
    例子：
  1. <!DOCTYPE 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>Document</title>
  8.   </head>
  9.   <body>
  10.     <h1>hello world</h1>
  11.     <h1 class="site">海外运维网</h1>
  12.     <h1 class="active">晚上好</h1>
  13.     <style>
  14.       /* 标签选择器 */
  15.       h1 {
  16.         color: red;
  17.       }
  18.       /* 属性选择器 */
  19.       h1[class="site"] {
  20.         color: green;
  21.       }
  22.       h1[id="active"] {
  23.         color: red;
  24.       }
  25.     </style>
  26.   </body>
  27. </html>
3.2 上下文选择器

通过元素的位置与层级来匹配。
上下文选择器,一定要有一个查询入口,否则会递归查询

  1. 父子：>（仅限父子）
  • 代码演示
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li class="item">item1</li>
  12.       <li class="item">item2</li>
  13.       <li class="item">item3</li>
  14.       <ul>
  15.         <li class="item">item-1</li>
  16.         <li class="item">item-2</li>
  17.         <li class="item">item-3</li>
  18.         <li class="item">item-4</li>
  19.         <li class="item">item-5</li>
  20.       </ul>
  21.       <li class="item">item4</li>
  22.       <li class="item">item5</li>
  23.       <li class="item">item6</li>
  24.       <li class="item">item7</li>
  25.     </ul>
  26.     <style>
  27.       .list > .item {
  28.         border: solid 1px red;
  29.       }
  30.     </style>
  31.   </body>
  32. </html>
  • 效果图

    从运行效果可以看出，虽然 class 名称相同，但父子元素选择器值针对直接后代元素有用，次后代无效果。
  1. 后代：空格（后级所有元素，包括子集，孙子，重孙……）

    接父子选择器例子，简单修改，去掉 > 符号，所有具有相同class名称的样式都将改变。

  • 代码演示
    1. .list .item {
    2.   border: solid 1px red;
    3. }
  • 效果图

    具有通用样式的后代元素，使用此选择器更加方便灵活。
  1. 兄弟：+（相邻的下一个元素，紧跟的且只有一个）

    例子：有三个div元素，使用兄弟元素选择器，快速改变中间div的样式。

  • 代码演示

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    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>Document</title>
    8.   </head>
    9.   <body>
    10.     <div class="wrap">
    11.       <div class="demo one">
    12.         <p>我是第1个元素</p>
    13.       </div>
    14.       <div class="demo">
    15.         <p>我是第2个元素</p>
    16.       </div>
    17.       <div class="demo">
    18.         <p>我是第3个元素</p>
    19.       </div>
    20.     </div>
    21.     <style>
    22.       .wrap > .demo {
    23.         display: inline-block;
    24.         width: 100px;
    25.         height: 200px;
    26.         border: solid red 1px;
    27.       }
    28.       /* 通过兄弟选择器改变中间div样式 */
    29.       .wrap > .demo.one + * {
    30.         width: 300px;
    31.         color: green;
    32.       }
    33.     </style>
    34.   </body>
    35. </html>

  • 运行效果

  1. 同级：~（与当前元素同级的后面的全部元素）

    使用兄弟选择器例子代码，将 + 换成 ~，改变排除第一个元素后的，所有同级元素样式。

  • 代码演示

    1. .wrap > .demo.one ~ * {
    2.   width: 300px;
    3.   color: green;
    4. }
  • 运行效果
【文章原创作者：站群服务器 http://www.558idc.com/mggfzq.html 欢迎留下您的宝贵建议】
更多阅读