search

博客列表 >0322作业

0322作业

bloght5386
bloght5386原创
2021年05月02日 17:18:21555浏览

实例选择器优先级

  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.     <style>
  9.         /* id优先级高于类 101*/
  10.         #php2 p {
  11.             color: blue;
  12.         }
  13.         /* 类优先级高于标签 011*/
  14.         .php p {
  15.             color: yellow;
  16.         } 
  17.         p {
  18.             color: red;
  19.         }
  20.         /* 同级，后者覆盖前者 */
  21.         p {
  22.             color: green; 
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="php" id="php2">
  28.         <p>我爱PHP</p>
  29.     </div>
  30. </body>
  31. </html>

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.     <link rel="stylesheet" href="css/index.css">
  9. </head>
  10. <body>
  11.     <header></header>
  12.     <main></main>
  13.     <footer></footer>
  14. </body>
  15. </html>
  17. ####index.css文件
  18. @import url(header.css);
  19. @import url(main.css);
  20. @import url(footer.css);
  22. ####header.css文件
  23. header {
  24.     height: 50px;
  25.     background-color: yellow;
  26. }
  27. ####main.css文件
  28. main {
  29.     height: 400px;
  30.     background-color: blue;
  31. }
  32. ####footer.css文件
  33. footer {
  34.     height: 80px;
  35.     background-color: red;
  36. }
实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表）
  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.     <style>
  9.         /* 伪类选择器使用方式 */
  10.        /* 选择第一个元素 */
  11.            .list > li:first-of-type {
  12.                background-color: red;
  13.            }
  14.         /* 选择最后一个元素 */
  15.           .list > li:last-of-type {
  16.               background-color: aqua;
  17.           }
  18.        /* 选择第三个元素 */
  19.        .list >li:nth-of-type(3) {
  20.            background-color: blue;
  21.        }
  22.        /* 选择倒数第二个元素 */
  23.        .list > li:nth-last-of-type(2) {
  24.            background-color: cornflowerblue;
  25.        }
  26.     </style>
  27. </head>
  28. <body>
  29.     <ul class="list">
  30.         <li>item1</li>
  31.         <li>item2</li>
  32.         <li>item3</li>
  33.         <li>item4</li>
  34.         <li>item5</li>
  35.         <li>item6</li>
  36.     </ul>
  37. </body>
  38. </html>
上一条：0323作业下一条：0319作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多