PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > css选择器优先级、伪类选择器的使用和模块化样式

css选择器优先级、伪类选择器的使用和模块化样式

Blastix Riotz
Blastix Riotz 原创
2021年03月25日 00:02:48 494浏览

样式的层叠及优先级

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议