search

博客列表 >实战演示元素的样式来源以及基本选择器,和上下文选择器 并对比选择器的权重,并分析了为什么常用class属性少用id和标签属性

实战演示元素的样式来源以及基本选择器,和上下文选择器 并对比选择器的权重,并分析了为什么常用class属性少用id和标签属性

卢先生
卢先生原创
2021年12月24日 00:57:50428浏览

课后作业

实战演示元素的样式来源以及基本选择器,和上下文选择器 并对比选择器的权重,并分析了为什么常用class属性少用id和标签属性

  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>
  11.       <h1>作业内容：</h1>
  12.       <h5>示例演示元素的样式来源</h5>
  13.       <!-- 上面使用的h1和h5是浏览器自带的样式来源,并非用户自定义的样式来源 -->
  14.       <!-- 下面为用户自定义来源,来源的方式有三种 -->
  15.       <h1 style="color: blue">用户自定义样式来源</h1>
  16.       <!-- 理解为行内 -->
  17.       <h1 class="h1">内部样式</h1>
  18.       <style>
  19.         .h1 {
  20.           color: brown;
  21.         }
  22.       </style>
  23.     </div>
  24.     <!-- 上面理解为内部 -->
  25.     <h2 class="h2">引用外部样式</h2>
  26.     <link rel="stylesheet" href="demo.css" />
  27.     <!-- 引用外部的css -->
  28.     <!-- 1. 实例演示: 元素的样式来源结束 -->
  29.     <!-- 示例演练以下几种常用的选择器 -->
  30.     <h2>基本选择器常用的几种</h2>
  31.     <h4>标签选择器</h4>
  32.     <p>像常用的标签选择器有div/h1/h2/h3以标签命名</p>
  33.     <p>标签选择器实现当前的效果</p>
  34.     <style>
  35.       h2 {
  36.         background-color: brown;
  37.       }
  38.       p {
  39.         color: blue;
  40.       }
  41.       h4 {
  42.         background-color: blueviolet;
  43.       }
  44.     </style>
  45.     <!-- 标签选择器演练结束下面将使用class选择器 -->
  46.     <div class="tags">
  47.       <p>当前使用了class选择器,当前页面前面已经使用了p标签选择器,</p>
  48.       <p>但是我现在又用了class选择器,class选择器的权重比标签选择器高,</p>
  49.       <p>来查看下效果吧</p>
  50.     </div>
  51.     <style>
  52.       div.tags p {
  53.         color: red;
  54.       }
  55.     </style>
  56.     <!-- 下面将使用id选择器,按照权重的分配,标签选择器的权重比id选择器更低,这里将使用到id选择器 -->
  57.     <div id="tags" class="tags">
  58.       <p>id选择器具有较高的权限,比默认的浏览器自带的,和class选择器的级别更改,</p>
  59.       <p>当前使用了id选择器,在之前的代码中,已经写到了class选择器p标签的颜色,</p>
  60.       <p>红色,但是我用id选择器又更改为了另外的颜色</p>
  61.     </div>
  62.     <style>
  63.       #tags p {
  64.         color: chocolate;
  65.       }
  66.     </style>
  67.     <!-- 下面为群组选择器的实战演练 -->
  68.     <div>
  69.       <div>
  70.         <a href="">群组选择器1</a>
  71.         <a href="">群组选择器2</a>
  72.         <a href="">群组选择器3</a>
  73.         <a href="">群组选择器4</a>
  74.         <a href="">群组选择器5</a>
  75.       </div>
  76.     </div>
  77.     <div>
  78.       <li>
  79.         <a href="">第二组1</a><a href="">第二组2</a><a href="">第二组3</a><a href="">第二组4</a><a href="">第二组5</a>
  80.       </li>
  81.     </div>
  82.     <style>
  83.       div a,
  84.       li a {
  85.         color: crimson;
  86.       }
  87.     </style>
  88.     <!-- 上面为群组选择器的实战演练 -->
  89.     <!-- 下面为通配符选择器演练部分 -->
  90.     <style>
  91.       html body ul li * {
  92.         color: darkgreen;
  93.       }
  94.     </style>
  95.     <ul>
  96.       <li>
  97.         <a href="baidu.com">百度一下1</a><a href="baidu.com">百度一下2</a><a href="baidu.com">百度一下3</a
  98.         ><a href="baidu.com">百度一下4</a><a href="baidu.com">百度一下5</a>
  99.       </li>
  100.     </ul>
  101.     <!-- 上方为通配选择器演练部分 -->
  102.     <!-- 下面为上下文选择器实战部分 -->
  103.     <!-- 常规的子元素选择器 -->
  104.     <ul class="php">
  105.       <li>
  106.         <a href="php.cn">php中文网上级</a>
  107.       <li>
  108.         <a href="php.cn">php中文网1</a><a href="php.cn">php中文网2</a><a href="php.cn">php中文网3</a
  109.         ><a href="php.cn">php中文网4</a><a href="php.cn">php中文网5</a>
  110.       </li>
  111.       </li>
  112.     </ul>
  113.     <style>
  114.     ul.php > li > a{color: darkmagenta;}
  115.     </style>
  116.     <!-- 兄弟元素和和后代元素同时使用,词快穷了 -->
  117.     <ul>
  118.         <li>后代元素15</li>
  119.         <li class="h">后代元素25</li>
  120.         <li>后代元素35</li>
  121.         <li>后代元素45</li>
  122.         <li>后代元素55</li>
  123.     </ul>
  124.     <style>ul li.h + *{color: darkmagenta;}</style>
  125.     <!-- 兄弟后代元素完毕 -->
  126.     <div>
  127.       <div>
  128.         <li>
  129.           <a href="" class="a1">证明一下后面的所有元素</a>
  130.           <a href="" class="a2">证明一下后面的所有元素</a>
  131.           <a href="" class="a3">证明一下后面的所有元素</a>
  132.           <a href="" class="a4">证明一下后面的所有元素</a>
  133.           <a href="" class="a5">证明一下后面的所有元素</a>
  134.         </li>
  135.       </div>
  136.     </div>
  137.     <style>div div li a.a2 ~ *{color: darkturquoise;}</style>
  138.     <!-- 后面所有的元素证明完毕 -->
  139.     <!-- 最后面选择器的权重 -->
  140.     选择器的权重id>class>标签,而同类相比,数量又居上,
  141.     <div>
  142.       <div><div><div><div><li>
  143.         <a href="">标签权重测试</a>
  144.       </li></div></div></div></div>
  145.     </div>
  146.     <style>
  147.       /* 下面属性标签为4个div 一个a标签.标签的值为0 0 5 所以为紫色 */
  148.     div div div li a{color: darkviolet;}
  149.     /* 如果不注释上面的标签,使用下面的标签 标签的值为0 0 6 */
  150.     div div div div li a{color: red;}
  151.     </style>
  152. <!-- 上面为标签属性权重对比 -->
  153. <!-- 下面为class权重属性对比 -->
  154.     <div>
  155.       <div><div class="div"><div><div><li class="li">
  156.         <a href="">class权重测试</a>
  157.       </li></div></div></div></div>
  158.     </div>
  159.     <style>
  160.       /* 下面属性标签+class为4个div 一个class 一个a标签.标签的值为0 1 5 所以为紫色 */
  161.     div div div li.li a{color: darkviolet;}
  162.     /* 如果不注释上面的标签,使用下面的标签 标签的值为0 2 6 */
  163.     div div.div div div li.li a{color: red;}
  164.     </style>
  165.     <!-- id属性+class属性+标签属性权重测试 -->
  166.     <div>
  167.       <div id="nav"><div class="div nav"><div><div><li class="li">
  168.         <a href="">综合属性权重测试</a>
  169.       </li></div></div></div></div>
  170.     </div>
  171.     <style>
  172.       /* 下面属性标签+class为4个div 一个class 一个a标签.标签的值为0 1 5 所以为紫色 */
  173.     div div div li.li a{color: darkviolet;}
  174.     /* 如果不注释上面的标签,使用下面的标签 标签的值为0 2 6 */
  175.     div div.div div div li.li a{color: red;}
  176.     /* 如果不注释上面的标签,使用下面的标签 标签的值为0 3 6 */
  177.     div div.div.nav div div li.li a{color: rgb(60, 0, 255);}
  178.     /* 如果不注释上面的标签,使用下面的标签 标签的值为1 3 6 */
  179.     div#nav div.div.nav div div li.li a{color: orangered;}
  180.     </style>
  181.   </body>
  182. </html>

以下部分为本人理解部分,老师可以略过.

元素来源:

元素的两大样式来源
  • 浏览器默认样式
  • 用户自定义样式
  1. 浏览器默认样式
    浏览器的默认样式常用的都存在于标签中,如h1/h2/h3/a标签,都是常见的浏览器自默认样式的标签,h1标签对文字增大,a标签对文字颜色加色
  2. 用户自定义样式
    用户自定义样式的格式如下面几篇代码均为用户自定义样式
    <h1 style="color: red">你好php</h1>
    <a href="#"style="color: red" >把a标签默认的颜色蓝色换成红色</a>
    用户定义了颜色为红色的文字,也叫设置样式
    /* h1 : 标签/也叫元素选择器 */
    有了标签需给标签添加样式,上面已经添加了样式,样式是包裹在标签里面,形式如下:
    style="老师叫形式声明"
    写法如下:
    1.    /* h1 { */
    2.    /* 样式声明: 使用是"名值对" */
    3.    /* color: red; */
    4.    /* } */
而形式声明又分为三种
  • 行内形式
  • 内部形式
  • 外部形式
  1. 行内形式
    行内形式顾名思义,是写在标签行内的形式,如以下:
    <h1 style="color: red">你好php</h1>

  2. 内部形式
    内部形式是写在页面内部,如以下

    1. <h1 style="color: indigo">大家晚上好,吃了吗?</h1>
    3.  <style>
    4.    h1 {
    5.      color: blue;
    6.    }
    7.  </style>

  3. 外部形式
    外部形式是引用外部css到当前页面或多个页面调用使用,示例代码如下:

    1. <link rel="stylesheet" href="css/style1.css" />
    2.  上面css里面已经写入了css
    3. <h1 class="love">大家晚上好,吃了吗?</h1>

    其优先级关系调用,行内>内部>外部 当然还有个秒天秒地秒空气的..尽量调试用的
    这里直接贴入老师写注释代码,以防自己忘记.

    1. <!-- 当前是HTML, 结构化的文本文档,它内部的所有元素,必须使用"标签"进行描述 -->
    2.  <!-- 只要放到了html中内容,并且要被浏览器进行解析或处理的,就必须要放到一个"标签"  -->
    3.  <style>
    4.    /* 1. 查询: 找到要被添加样式的元素 */
    5.    /* selector : 选择器 */
    7.    /* h1 : 标签/元素选择器 */
    8.    /* 2. 为匹配的元素,设置样式规则 */
    9.    /* 样式规则: 放入一对大括号中 */
    10.    /* h1 { */
    11.    /* 样式声明: 使用是"名值对" */
    12.    /* color: red; */
    13.    /* } */
    15.    /* 选择器 {
    16.        一个或多个样式声明
    17.    } */
    19.    /* css工作流:  1. 找到元素;  2. 设置样式  */
    20.  </style>
    22.  <!-- style属性的优先级要大于  style 标签  -->
    24.  <!-- style="..." : 行内样式/内联样式, 直接作用到"元素级" -->
    25.  <!-- <style>: 内部样式/文档样式, 直接作用到"文档级" -->

再说下内页优先级,常用在页面内部和css内部,当一个css当中,例如颜色为多个颜色,优先使用最后一个,如以下:

  1.    <style>
  2.       h1 {
  3.         color: red;
  4.         color: green;
  5.         color: blue;
  7.         /* 样式来源, 除了与优先级相关, 还与书写顺序相关 */
  8.         /* 写到后面,会覆盖前面的 */
  9.       }
  10.     </style>
标签属性的样式集成

先贴代码:

  1.     <div>
  2.       <p>html是一个具有层级结构的文档,可以根据元素之间层级关注,实现样式复用</p>
  3.       <a href="#">样式继承</a>
  4.       <h3 style="color: turquoise">Hello</h3>
  5.     </div>
  6.     <style>
  7.       div {
  8.         /* div是P的父级 */
  9.         border: 1px solid #000;
  10.         color: violet;
  11.       }
  13.       p {
  14.         color: green;
  15.         /* 颜色/前景色: 是可以继承的属性 */
  16.         color: inherit;
  17.       }
  19.       /* 默认样式/代理样式 > 继承样式  */
  21.       /* 1. style标签 
  22.       2. 外部css文档
  23.       3. 样式继承 */
  24.     </style>

子级集成父级别的样式,例如代码中如果不存在p标签单独的属性,div中的颜色会继承为p标签,但如果p标签有了自己的颜色,将使用p标签单独的颜色,其中p标签color: inherit;意思是强制继承父级color颜色.就是无论p标签的color单独设置什么颜色,都将继承div里面的color的颜色,多用多数量

属性基本选择器

属性的基本选择器常用的分为以下几种:

  1.  <h2>item1</h2>
  2.     <h2 title="hello">item2</h2>
  3.     <!-- id的唯一性由开发者确保,浏览器不检查 -->
  4.     <h2 id="a">item3</h2>
  5.     <h2 id="a">item4</h2>
  6.     <h2 class="b">item5</h2>
  7.     <h2 class="b">item6</h2>
  9.     <style>
  10.       /* 基本选择器: 根据元素自身特点来选择 */
  11.       /* 1. 标签选择器 */
  12.       h2 {
  13.         color: red;
  14.       }
  16.       /* 2. 属性选择器 */
  17.       h2[title="hello"] {
  18.         color: green;
  19.       }
  20.       /* id: 用于唯一元素 */
  21.       h2[id="a"] {
  22.         color: blue;
  23.       }
  24.       /* class: 用于多个元素 */
  25.       h2[class="b"] {
  26.         color: violet;
  27.       }
  29.       /* id, class是 高频属性 */
  30.       /* id => #  */
  31.       h2#a {
  32.         color: cyan;
  33.       }
  34.       /* class = "."  */
  35.       h2.b {
  36.         color: orange;
  37.       }
  38.       /* 推荐尽可能只用class  */
  40.       /* 3. 群组选择器 */
  41.       h2#a,
  42.       h2.b {
  43.         background-color: yellow;
  44.       }
  46.       /* 4. 通配选择器: *  */
  47.       html body * {
  48.         background-color: gray !important;
  49.       }
  50.       /* !important: 瞬间提权到100%*只建议在开发中使用  */
  51.     </style>
上下文选择器/层级选择器

示例代码:

  1.     <ul class="list">
  2.       <li class="item">item1</li>
  3.       <li class="item second">item2</li>
  4.       <li class="item">
  5.         item3
  6.         <!-- <ul class="inner">
  7.           <li>item3-1</li>
  8.           <li>item3-2</li>
  9.           <li>item3-3</li>
  10.         </ul> -->
  11.       </li>
  12.       <li class="item">item4</li>
  13.       <li class="item">item5</li>
  14.       <li class="item">item6</li>
  15.       <li class="item">item7</li>
  16.       <li class="item">item8</li>
  17.     </ul>
  19.     <style>
  20.       /* 1. 子元素(就是class属性+标签,是用符号>,具体的区分可以看下后代元素部分)  
  21. 也就是说,这里生效的部分仅限于第四行以前,超出第四行部分css部分不会生效*/
  22.       .list > li {
  23.         border: 1px solid #000;
  24.       }
  26.       /* 2. 后代元素: 空格 (后代元素是后面是后面所有的,意思就是,不止第四行的css会变,第10行以前的li都会改变css样式)*/
  27.       .list li {
  28.         border: 1px solid #000;
  29.       }
  31.       /* 3. 相邻兄弟: +  */(比较好理解就是下一行代码执行的命令)
  32.       .item.second + * {
  33.         background-color: lightcyan;
  34.       }
  36.       /* 4. 所有兄弟: ~  */ (定位的后面所有代码都将执行下面的css)
  37.       .item.second ~ * {
  38.         background-color: yellow;
  39.       }
  40.     </style>
选择器的继承
  1. <body>
  2.     <h1 class="title" id="active">Hello</h1>
  4.     <style>
  5.       /* 1 1 2 */
  6.       /* 2: 表示2个标签, 
  7.       1: 表示1个class
  8.       1: 表示1个id  */
  9.       body h1.title#active {
  10.         color: red;
  11.       }
  12.       /* 0 1 2 */
  13.       /* 2: 表示2个标签, 
  14.       1: 表示1个class
  15.       0: 表示没有id  */
  16.       body h1.title {
  17.         color: blue;
  18.       }
  19.       /* 就想放在第一行,又想让它生效,只有提权 */
  20.       /* 0 0 2 */
  21.       /* 2: 表示2个标签, 
  22.       0: 表示没有class
  23.       0: 表示没有id  */
  24.       body h1 {
  25.         color: green;
  26.       }
  27.       /* 相同的权重,由位置决定样式 */
  28.       /* 0 0 1 */
  29.       /* 1: 表示只有一个标签, 
  30.       0: 表示没有class
  31.       0: 表示没有id  */
  32.       h1 {
  33.         color: darkorange;
  34.       }
  36.       /* 三个权重的位置, 从右到左
  37.       第1位: 标签数量
  38.       第2位: class数量
  39.       第3位: id数量 */
  41.       /* css 将 id, class, tag 看成一个"三位整数", id -> 百位, class -> 十位, tag -> 个位 */
  43.       /* h1 {
  44.         color: violet !important;
  45.       } */
  47.       /* id : 为什么不推荐用? 因为权重太高, 为了让你的代码具有弹性,尽可能用class */
  48.       /* 为什么不用权重最低的标签呢? 只是标签的数量太少了, 而class可以任何命名 */
  50.       /* bootstrap , element ui  */
  51.     </style>
  53.     <div class="col-md-3 vip">Bootstrap</div>
  55.     <style>
  56.       /* 0 2 1 */
  57.       div.col-md-3.vip {
  58.         border: 5px solid red;
  59.       }
  60.       /* 0 1 1  */
  61.       div.col-md-3 {
  62.         border: 1px solid #000;
  63.       }
  64.     </style>
  65.   </body>
上一条：CSS基础(元素样式、CSS基础选择器)下一条：css基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多