Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css选择器优先级、伪类选择器的使用和模块化样式
Blogger Information
Blog 16
fans 0
comment 0
visits 9551
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
css选择器优先级、伪类选择器的使用和模块化样式
Blastix Riotz
Original
521 people have browsed it

样式的层叠及优先级

优先级id>class>tag

实例

  • html代码
    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.       /* class>tag，所以h1为绿色 */
    10.       h1 {color: aqua;}
    11.       .a {color: lightgreen;}   
    12.       /* id>class>tag,所以h2为粉色 */
    13.       h2 {color: aqua;}
    14.       .a {color: lightgreen;}
    15.       #aa {color: hotpink;}
    16.   </style>
    17. </head>
    18. <body> 
    19.   <h1 class="a" >Hello Word</h1>
    20.   <h2 class="a" id="aa">Hello Word</h2>
    21. </body>
    22. </html>

    前端组件样式的模块化

  • demo.html
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <!--引入文件index.css-->
    7.   <link rel="stylesheet" type="text/css" href="css/index.css">
    8. </head>
    9. <body>
    10.   <header>头部</header>
    11.   <main>身体</main>
    12.   <footer>页尾</footer>
    13. </body>
    14. </html>
  • index.css
    1. @import url(header.css);
    2. @import url(main.css);
    3. @import url(footer.css);
  • heard.css
    1. header{min-height: 3em;background-color: red;}
  • main.css
    1. nain{min-height: 5em;background-color: blue;}
  • footer.css
    1. footer{min-height: 4em;background-color: green;}

    伪类选择器的使用方式

  • html代码

    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>组件化编成思想</title>
    8.   <style>
    9.    /* 只要获取到页面中某个元素的入口，
    10.    再根据子元素的位置，
    11.    使用伪类就可以选择任何一个元素 */
    13.    /* 选择首页 */
    14.    /* .index {
    15.        background-color: yellow;
    16.    } */
    17.    .menu :first-of-type{
    18.        background-color: yellow;
    19.    }
    20.    .menu :last-of-type{
    21.        background-color: lightgreen;
    22.    }
    23.    .menu :nth-last-child(2) {
    24.        background-color: pink;
    25.    }
    26.    /* 只要获取表单入口，使用伪类就可以获取表单中任何一个控件 */
    27.    /* 获取提交按钮 */
    28.   .login :only-of-type {
    29.       background-color: seagreen;
    30.       color: seashell;
    31.   }
    32.   </style>
    33. </head>
    34. <body>
    35.   <nav class="menu">
    36.       <a href="" class="index">首页</a>
    37.       <a href="">视频</a>
    38.       <a href="">下载</a>
    39.       <a href="">注册</a>
    40.       <a href="">登陆</a></a>
    41.   </nav>
    43.   <hr>
    45.   <form action=""style="display:grid; gap:1rem"  class="login">
    46.       <input type="text" placeholder="UserName" > </input>
    47.       <input type="password" placeholder="Psaaword"></input>
    48.       <input type="email" placeholder="demo@email.com"></input>
    49.       <button>提交</button></button>
    50.   </form>
    51. </body>
    52. </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