Blogger Information
Blog 14
fans 2
comment 2
visits 6662
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
20220706第三节CSS样式选择器的应用场景
西门瑶雪
Original
432 people have browsed it

css自定义、默认样式演示

css演示图片效果

css自定义、默认样式演示

css样式代码演示

  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>CSS样式</title>
  8. <link rel="stylesheet" href="css.css">
  9. </head>
  10. <body>
  11. <!---1、优先级:自定义样式》继承样式》默认样式;字体和颜色可以继承
  12. 2、后面的样式颜色覆盖前面的(与书写顺序有关,最后面的优先执行)
  13. -->
  14. <div style="color:red">
  15. <h2 >世界你好!</h2>
  16. <h3 style="color:rgb(68, 0, 255)"; color="#f00">世界你好!</h3>
  17. </div>
  18. <hr>
  19. <h1 >Hello,云逸你好,中国你好!</h1>
  20. <h1 >Hello,百度你好,中国你好!</h1>
  21. <h1 >Hello,腾讯你好,中国你好!</h1>
  22. <hr>
  23. <!--
  24. <style>
  25. /*仅限当前文档使用*/
  26. h1{color:rgb(24, 5, 94);}
  27. </style>
  28. -->
  29. </body>
  30. </html>
  1. /*仅限当前文档使用*/
  2. h1{color:rgb(24, 5, 94);}

CSS容器选择器应用

css容器选择器效果图

CSS容器选择器应用

代码演示

  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>CSS选择器</title>
  8. <link rel="stylesheet" href="slect.css">
  9. </head>
  10. <body>
  11. <div>
  12. <h1 class="yu">我的世界,我做主</h1>
  13. <h1 title="我做主">我的世界,我做主</h1>
  14. <h1 class="tr">我的世界,我做主</h1>
  15. <h1 id="aw">我的世界,我做主</h1>
  16. <h1 class="tp">我的世界,我做主</h1>
  17. <h1 class="tp">我的世界,我做主</h1>
  18. </div>
  19. <div>
  20. <h2>云逸你好,世界属于我的!</h2>
  21. <h2>云逸你好,世界属于我的!</h2>
  22. <h2>云逸你好,世界属于我的!</h2>
  23. <h2>云逸你好,世界属于我的!</h2>
  24. </div>
  25. <ul class="list">
  26. <li class="item">item11</li>
  27. <li class="item">item12</li>
  28. <li class="item">item13</li>
  29. <li class="item">item14</li>
  30. <li class="item">item15</li>
  31. <li class="item"> item16
  32. <ul>
  33. <li class="item three" >Trop</li>
  34. <li class="item">Trop</li>
  35. <li class="item"> Trop</li>
  36. <li class="item two">Trop</li>
  37. <li class="item">Trop</li>
  38. <li class="item paw">Trop</li>
  39. <li class="item">Trop</li>
  40. <li class="item">Trop</li>
  41. <li class="item">Trop</li>
  42. </ul>
  43. </li>
  44. </ul>
  45. </body>
  46. </html>

csss数据表

  1. /*元素=属性+标签
  2. 标签选择器
  3. 属性选择器
  4. 通配选择器用*
  5. 群组选择器,相同颜色的用一组,使用,隔开;
  6. id=#
  7. class=.
  8. */
  9. h1{color: blueviolet;}
  10. h1[title="我做主"]{color:rgb(158, 230, 25);}
  11. h1.tr{color:rgb(36, 2, 2);}
  12. h1#aw{color:rgb(145, 11, 11);}
  13. h1.yu,h1.tp{color:white;background: rgb(177, 61, 61);}
  14. h1{background: gray !important}
  15. body * {color:rgb(73, 66, 4);}
  16. /*
  17. 1、子元素用 >
  18. 2、后代元素用 空格
  19. 3、相邻兄弟用 + (*代表所有元素)
  20. 4、所有兄弟用 ~ *
  21. .list>.item{border:1px solid}
  22. */
  23. .list .item{border:1px solid}
  24. .list .item.three{background: rgb(49, 40, 170);}
  25. .list .item.three+li{background: rgb(41, 187, 85);}
  26. .list .item.two{background: rgb(41, 187, 85);}
  27. .list .item.two + *{background: rgb(41, 187, 85);}
  28. .list .item.paw ~ *{background: rgb(212, 38, 81);}
Correcting teacher:PHPzPHPz

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