简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css样式来源/选择器
Blogger Information
Blog 11
fans 0
comment 0
visits 5792
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样式来源/选择器
becauses
Original
349 people have browsed it

css

样式来源

  • 默认样式
  • 行内样式 style=””
  • 文档样式 <style></style>
  • 外部样式 style.css

选择器

基本选择器

  • [属性]
  • # id
  • . class
  • * 通配符

    上下文选择器

  • > 子元素 只选择一代
  • 空格 所有后代
  • + 相邻兄弟
  • ~ 所有兄弟

css权重

  • 最高级:!important
  • 第一等:内链style=””
  • 第二等:ID选择器 #h3
  • 第三等:类选择器 .h3
  • 第四等:空格选择器 div h3
  • 通配符:子选择器、相邻选择器等

案例

  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.     <link rel="stylesheet" href="css.css">
  10. <style>
  11. *{
  12.     font-size:45px;
  13.     font-weight:bolder;
  14. }
  15. /* 子元素 只选择一代 */
  16. .div2>div>span{
  17.     color:#159454;
  18. }
  19. /* 空格 所有后代 */
  20. .div3>div span{
  21.     color:#8b9415;
  22. }
  23. /* 相邻兄弟 */
  24. .div4>div+ul{
  25.     color:#849229;
  26. }
  27. /* 所有兄弟 ~ */
  28. .div5>div~ul{
  29.     color:#359229;
  30. }
  31. /* 
  32. 最高级:!important
  33. 第一等:内链style=""
  34. 第二等:ID选择器 #h3
  35. 第三等:类选择器 .h3
  36. 第四等:空格选择器 div h3
  37. 通配符:子选择器、相邻选择器等
  38. */
  39. div h3.h3#h3{
  40.     color:#123456;
  41. }
  42. div h3.h3{
  43.     color:#234567;
  44. }
  45. div h3{
  46.     color:#345678;
  47. }
  48. h3{
  49.     color:#456789;
  50. }
  52. /* 优先执行!important */
  53. .div{
  54.     color:#4a498f !important;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <div style="display: flex;" >
  60. <div style="width:50%;" >
  61.     <!-- 第二执行style -->
  62.     <div class="div" style="color:red;">123</div>
  64.     <div class="div2" >
  65.         <div>
  66.             <span>11</span>
  67.         </div>
  68.         <div>
  69.             <div>
  70.                 <span>22</span>
  71.             </div>
  72.         </div>
  73.     </div>
  75.     <div class="div3" >
  76.         <div>
  77.             <span>11</span>
  78.         </div>
  79.         <div>
  80.             <div>
  81.                 <span>22</span>
  82.             </div>
  83.         </div>
  84.     </div>
  86.     <div class="div4" >
  87.         <div>
  88.             <span>11</span>
  89.         </div>
  90.         <ul>
  91.             <li>222</li>
  92.         </ul>
  93.         <ul>
  94.             <li>333</li>
  95.         </ul>
  96.     </div>
  98.     <div class="div5" >
  99.         <div>
  100.             <span>11</span>
  101.         </div>
  102.         <ul>
  103.             <li>222</li>
  104.         </ul>
  105.         <ul>
  106.             <li>333</li>
  107.         </ul>
  108.     </div>
  109. </div>
  110. <div style="width:50%;" >
  111. <!-- 权重 -->
  112. <h3 class="h3" id="h3" >123</h3>
  113. </div>
  114. </div>
  115. </body>
  116. </html>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！