Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0322作业
Blogger Information
Blog 19
fans 0
comment 0
visits 10093
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0322作业
bloght5386
Original
545 people have browsed it

实例选择器优先级

  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>
Correcting teacher：灭绝师太灭绝师太

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post