Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css来源优先级与选择器权重
Blogger Information
Blog 10
fans 0
comment 0
visits 4721
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来源优先级与选择器权重
P粉854918706
Original
368 people have browsed it

css来源优先级与选择器

自定义css样式来源及优先级示例

优先级：内联样式>文本样式>外联样式

  1. p{
  2.     color:aqua;
  3. }
  4. .title{
  5.     color:cyan;
  6.     font-size: larger;
  7. }
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <link rel="stylesheet" href="demo3.css">
  9. </head>
  10. <body>
  11.     <style>
  12.         p{
  13.             color:blue;
  14.         }
  15.         .title{
  16.             color:chartreuse;
  17.             font-size:30px;
  18.         }
  19.     </style>
  20.     <p style="color: red;">就是这一段文字看看效果</p>
  21.     <div class="title">这一段用类定义的样式会呈现什么效果呢？</div>
  22.     <div class="title" style="color:cornflowerblue;font-size:xx-small">这一段用类定义的样式会呈现什么效果呢？</div>
  23. </body>
  24. </html>

常用选择器及权重

常用选择器有如下几种：

  1. 标签选择器：html预置标签如段落、表格，文本，表单等
  2. 属性选择器：用标签+[属性=“属性值”]来表示
  3. 群组选择器：用,来表示
  4. 通配选择器:用*来表示
  5. 上下文选择器：
    • 子元素用 >表示
    • 后代元素：用 空格表示
    • 相邻兄弟：用+号表示
    • 所有兄弟：用~波浪线表示

选择器权重用（0 0 0）表示
其中个位上的0表示为标签tag，十位上的0表示为class，百位上的数字表示为id

示例如下：

  1. /* 标签选择器，权重最低 */
  2. ul{
  3.     color:aqua;
  4.     border: 2px solid;
  5. }
  6. /* 空格表示后代 */
  7. .list .item{
  8.     border: 2px greenyellow solid;
  9. }
  10. /* 虽然写在后面，但是权重为0  1  0,比上面样式低 */
  11. .item{
  12.     color:blue
  13. }
  14. /* 用ID来做最高权重 */
  15. #seven{
  16.     background-color: burlywood;
  17.     color:rgb(233, 19, 222);
  18. }
  19. /* 所有兄弟及其后代元素 */
  20. .list .item.five ~ *{
  21.     background-color:coral;
  22. }
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <link rel="stylesheet" href="demo3.css">
  9. </head>
  10. <body>
  11.     <ul class="list">
  12.         <dd class="item">item1</dd>
  13.         <dd class="item">item2</dd>
  14.         <dd class="item">item3</dd>
  15.         <dd class="item">item4</dd>
  16.         <dd class="item five">item5</dd>
  17.         <dd class="item">item6</dd>
  18.         <dd class="item" id="seven">item7</dd>
  19.         <dd class="item">item8</dd>
  20.     </ul>
  21. </body>
  22. </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