Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css权重和伪类选择器
Blogger Information
Blog 17
fans 0
comment 0
visits 8256
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权重和伪类选择器
想做一个躺平的程序员
Original
408 people have browsed it

css样式优先级(权重)

我们先来看一张图片

再来看演示的如下
注释很重要

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>写写选择器的权重</title>
  7. </head>
  8.     <style> 
  9.             /* //还有一种是用于调试css样式的 */
  10.             /* !important  权重是最大 */  
  11.             div{
  12.                 background-color: darkturquoise !important;
  13.             }
  15.         /* 由于id的权重是最大的,我们写在最上面 */
  16.             #name{
  17.                     background-color: yellow;
  18.             }
  20.             /* 为防止css样式书写顺序, 我故意写在上面来比较 */
  21.             .header{
  22.                     /* 权重算计:id权重为0,class权重为1,标签权重为0 ,既0,1,0 */
  23.                     background-color: blue;
  24.             }
  25.              div{    
  26.                 /* 权重计算: id权重为0 ,class权重为0,标签权重为1,既 0,0,1 */ 
  27.                 background-color: brown;
  28.             }
  30.     </style>
  31. <body>
  32.         <!-- 权重是什么,一句话就是css样式的优先级 -->
  33.         <!-- 我们来说说权重
  34.                 id的权重是:百位
  35.                 class的权重是: 十位
  36.                 标签的权重是: 个位 -->
  37.             <!-- 为了防止权重过大,一般情况下都不会写id选择器 -->
  38.         <div class="header" id="name">
  39.             <ul class="list">
  40.                 <li>item1</li>
  41.                 <li>item2</li>
  42.                 <li>item3</li>
  43.                 <li>item4</li>
  44.                 <li>item5</li>
  45.             </ul>
  46.         </div>
  50. </body>
  51. </html>

下面四种图片对应的是div选择器,class选择器,id选择器, !important

第一张div选择器页面效果

第二张class选择器页面效果

第三张id选择器页面效果

第四张!important用于调试css样式页面效果

伪类选择器知识点

直接演示代码 注释很重要

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css 练习伪类选择器</title>
  7.     <style>
  8.         /* // first-of-type:  同组兄弟元素中的第一个元素 */
  9.         .list> li:first-of-type
  10.         {
  11.             font-size: 20px;
  12.             background-color: salmon;
  13.         }
  15.             /* :first-child: 一组兄弟元素中的第一个元素 */
  16.         .list li:first-child{
  17.             background-color: cornflowerblue;
  18.             width: 200px;
  19.         }
  21.         /* ul li:nth-child(an+b) */
  22.         /* 我们来说说小括号中的 a n b */
  23.             /* n=0,1,2,3,4,5,6,... */
  24.             /* b是偏移量， 可以是 0,1,2,3,4,... */
  25.             /* a是倍数 可以是0,1,2,3,4,5,....  */
  26.             /* a和b都必须是整数,元素的第一个子元素的下标是1 */
  27.             /* 注意: an+b不能写成 b+an */
  29.             /* :nth-child(an+b) : 找到当前元素的兄弟元素 */
  30.             .list li:nth-child(2){
  31.                     background-color: red;
  32.                     height:50px;
  33.                     width: 200px;
  34.             }
  36.             /* //如果小括号是2n,则表示是偶数行  */
  37.                 .list li:nth-child(2n)
  38.             /* 偶数行也可以用even来表示 */
  39.                 .list li:nth-child(even)
  41.     /* //既然有偶数行，肯定是有奇数行 */
  42.             /* //小括号是2n+1 ，则表示是奇数行 */
  43.             .list li:nth-child(2n+1)
  44.             /* 奇数行也可以用ood来表示 */
  45.             .list li:nth-child(odd)
  47.         /* //  在兄弟元素中，从后往前推，查找某一个特定的元素 */
  48.             .list li:nth-last-child(an+b) 
  52.     </style>
  53. </head>
  54. <body>
  55.     <ul class="list">
  56.         <li>item1</li>
  57.         <li>item2</li>
  58.         <li>item3
  59.             <ul class="test">
  60.                 <li>item1</li>
  61.                 <li>item2</li>
  62.                 <li>item3</li>
  63.                 <li>item4</li>
  64.                 <li>item5</li>
  65.             </ul>
  66.         </li>
  68.         <li>item4</li>
  69.         <li>item5</li>
  70.         <li>item6</li>
  71.         <li>item7</li>
  72.         <li>item8</li>        
  73.     </ul>
  75. </body>
  76. </html>

代码部分伪类页面效果

first-of-type伪类

nth-child(an+b)伪类

first-child伪类

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