Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS选择器讲解
Blogger Information
Blog 41
fans 2
comment 0
visits 29312
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选择器讲解
月光下，遗忘黑暗
Original
501 people have browsed it

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>
  • 效果图
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