Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS选择器优先级、模块化与伪类选择器的原理及应用
Blogger Information
Blog 11
fans 0
comment 0
visits 6581
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选择器优先级、模块化与伪类选择器的原理及应用
Ghcᝰ
Original
671 people have browsed it

CSS选择器优先级、模块化与伪类选择器的原理及应用

css 优先级

  • 行内样式优先级高于内部样式或外部样式
  • ID > CLASS > 元素标签
  • (ID,CLASS,元素) ==> (0,0,0) 当 ID 选择器存在时秒杀一切 CLASS 选择器，CLASS 选择器秒杀一切 标签选择器
  • 想要给选择器提升优先级可以在选择器后面使用!important 提权

css 模块化

  • 为了给代码更加清爽看起来更加舒适，一般不会给每个标签都加上 CLASS 或 ID，只需找到入口来操作其他的元素
  • 代码演示
    CSS选择器 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     /* 给类选择器为class的UL下的最后一个li标签添加背景颜色 */
  12.     .ulclass>li:last-of-type {
  13.         background-color: aquamarine;
  14.     }
  16.     /* 给类选择器为class的UL下的第一个li标签添加背景颜色 */
  17.     .ulclass>li:first-of-type {
  18.         background-color: royalblue;
  19.     }
  21.     /* 给类选择器为class的UL下的第三个li标签添加背景颜色 */
  22.     /* 用空格链接后代元素会把样式带给后代元素 */
  23.     .ulclass li:nth-of-type(3) {
  24.         background-color: blueviolet;
  25.     }
  27.     /* 给类选择器为class的UL下的单数li标签添加前景颜色 */
  28.     .ulclass>li:nth-of-type(2n+1) {
  29.         color: red;
  30.     }
  32.     /* 给类选择器为class的UL下的双数li标签添加前景颜色 */
  33.     .ulclass>li:nth-of-type(2n+2) {
  34.         color: blue;
  35.     }
  37.     /* 给ul下只存在一个li标签的元素加上边框 */
  38.     ul>li:only-of-type {
  39.         border: solid 2px;
  40.     }
  41. </style>
  43. <body>
  44.     <ul class="ulclass">
  45.         <li>item1</li>
  46.         <li>item2</li>
  47.         <li>item3
  48.             <ul>
  49.                 <li>孙子1</li>
  50.                 <li>孙子2</li>
  51.             </ul>
  52.         </li>
  53.         <li>item4</li>
  54.         <li>item5</li>
  55.         <li>item6</li>
  56.         <li>item7</li>
  57.         <li>item8</li>
  58.         <li>item9</li>
  59.         <li>item10</li>
  60.     </ul>
  61.     <ul>
  62.         <li>item1</li>
  63.     </ul>
  64. </body>
  66. </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