Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css基础：简单的选择器、伪类选择器与前端组件样式模块化知识
Blogger Information
Blog 8
fans 0
comment 0
visits 5536
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基础：简单的选择器、伪类选择器与前端组件样式模块化知识
WSC
Original
452 people have browsed it

选择器id、class、tag

优先级id>class>tag

示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         /* id选择器,优先级大于class与tag,h1为红色*/
  8.         h1#p11.p1{color: red}
  9.         h1.p1{color: blue}
  10.         h1{color: green}
  11.         /* class选择器,优先级大于tag,h2为蓝色*/
  12.         h2.p2{color: blue}
  13.         h2{color: green}
  14.         /* h3为绿色*/
  15.         h2{color: green}
  16.     </style>
  17. </head>
  18. <body>
  19.     <h1 class="p1" id="p11">77777</h1>
  20.     <h2 class="p2" id="p22">77777</h2>
  21.     <h2 class="p3" id="p33">77777</h2>
  22. </body>
  23. </html>

效果如图

简单的前端组件样式模块化

dome.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);

header.css

  1. header{min-height: 3em;background-color: red;}

main.css

  1. nain{min-height: 5em;background-color: blue;}
  1. footer{min-height: 4em;background-color: green;}

伪类选择器的使用

deom.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" type="text/css" href="css/css.css">
  7. </head>
  8. <body>
  9.     <ul class="list">
  10.         <li>7777</li>
  11.         <li>7777</li>
  12.         <li>7777</li>
  13.         <li>7777</li>
  14.         <li>7777</li>
  15.         <li>7777</li>
  16.     </ul>
  17.     <ul>
  18.         <li>888</li>
  19.     </ul>
  20. </body>
  21. </html>

css.css

  1. /*第一个li*/
  2. .list > li:first-of-type {
  3.   background-color: red;
  4. }
  5. /*第二个li*/
  6. .list > li:nth-of-type(2) {
  7.   background-color: yellow;
  8. }
  9. /*最后一个li*/
  10. .list>li:last-of-type{
  11.     background-color: blue;
  12. }
  13. /*倒数第三个li*/
  14. .list>li:nth-last-of-type(3){
  15.     background-color: green;
  16. }
  18. li:only-of-type{
  19.     background-color: skyblue;
  20. }

效果如图

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