1.css选择器优先级

  • tag选择器 class选择器 id同类选择器优先级顺序

    同类选择器

    生效顺序为同类最后一个
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <style>
    7.       h1 {
    8.           color : blue;
    9.       }
    10.       h1 {
    11.           color : red;
    12.       }
    13.   </style>
    14. </head>
    15. <body>
    16.   <h1>hello world</h1>
    17. </body>
    18. </html>

  • id选择器，class选择器，tag选择器优先级顺序

    id选择器>class选择器>tag标签选择器
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.        #one {
  8.            background-color: red;
  9.        }
  10.        .one {
  11.            background-color: blue;
  12.        }
  13.        .two {
  14.            background-color: blue;
  15.        }
  16.        ul li {
  17.            background-color: darkcyan;
  18.        }
  19.     </style>
  20. </head>
  21. <body>
  22. <ul>
  23.     <li class="one" id="one">item1</li>
  24.     <li class="two" id="two">item2</li>
  25.     <li>item3</li>
  26.     <li>item4</li>
  27.     <li>item5</li>
  28. </ul>
  29. </body>
  30. </html>

此处可以看到结论

  • id选择器>类选择器和tag选择器的
  • 类选择器>tag选择器

所以最后的结论是

  • id选择器>class选择器>tag标签选择器
  • 同类选择器，最后一个选择器为优先级

2.前端组件样式模块化

  • 方法一

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <style>
    7.      @import "css/css1.css";
    8.   </style>
    9. </head>
    10. <body>
    11. <h1>
    12.   hello world!
    13. </h1>
    14. </body>
    15. </html>

  • 方法二

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="css/css1.css">
  7. </head>
  8. <body>
  9. <h1>
  10.     hello world!
  11. </h1>
  12. </body>
  13. </html>

  • 效果图

    两个效果都是一样的

3.实例演示常用伪类选择器的使用方式

  • css
    css1

    1. .my_form :only-of-type {
    2.   background-color: darkcyan;
    3. }
    4. .index :nth-of-type(2) {
    5.   color:red;
    6. }

    css2

    1. .index :first-of-type {
    2.   color: darkcyan;
    3. }
    4. .index :last-of-type {
    5.   color: blue;
    6. }

    css3

    1. @import "css1.css";
    2. @import "form.css";

  • html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <style>
    7.       @import "main.css";
    8.   </style>
    9. </head>
    10. <body>
    11. <nav class="index">
    12.   <a href="">商品详情</a>
    13.   <a href="">商品列表</a>
    14.   <a href="">个人中心</a>
    15. </nav>
    16. <form class="my_form" style="display: grid; gap: 1rem">
    17.   <input type="text"  placeholder="Username">
    18.   <input type="password"  placeholder="Password">
    19.   <input type="email"  placeholder="demo@email.com">
    20.   <button>提交</button>
    21. </form>
    22. </body>
    23. </html>
  • 效果图

更多相关文章

  1. 浅谈CSS选择器以及伪类选择器模块化
  2. 选择器的优先级,id,class,tag。前端组件样式模块化的原理与实现
  3. 选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使
  4. 0322作业
  5. css基础：简单的选择器、伪类选择器与前端组件样式模块化知识
  6. css基础、选择器、模块化组件
  7. 【CSS入门】CSS基本语法和选择器优先级学习总结简介
  8. 伪类选择器,优先级,模块化
  9. CSS选择器优先级、模块化与伪类选择器的原理及应用

随机推荐

  1. Android(安卓)解决WebView支持WebGL的兼
  2. Android系列之Android 命令行手动编译打
  3. Android shell命令大全
  4. Android软键盘弹出，界面整体上移的问题
  5. android listview去掉分割线
  6. android在线播放音乐
  7. android读取文件权限
  8. Android游戏引擎《Rokon》
  9. Android TextView布局__2019.09.02
  10. Android系统修改导航栏显示位置