ASCII码 ASCII码

css权重和伪类选择器

发布于：2022-04-01 12:07:06  栏目：技术文档

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伪类

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行