search

博客列表 >CSS选择器学习总结

CSS选择器学习总结

麦穗
麦穗原创
2020年04月07日 18:39:36795浏览

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.       /* 类选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 元素选择器 */
  23.       :root {
  24.         background-color: paleturquoise;
  25.       }
  26.       /* 群组选择器 */
  27.       h2,
  28.       h4 {
  29.         color: royalblue;
  30.       }
  31.       /* 通配符选择器 */
  32.       * {
  33.         font-family: Arial, Helvetica, sans-serif;
  34.       }
  35.       /* 后代选择器 */
  36.       .container .item {
  37.         border: 1px solid black;
  38.       }
  39.       /* ID选择器 */
  40.       #center {
  41.         background-color: slateblue;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="container">
  47.       <div class="item">1</div>
  48.       <div class="item">2</div>
  49.       <div class="item">3</div>
  50.       <div class="item">4</div>
  51.       <div class="item" id="center">5</div>
  52.       <div class="item">6</div>
  53.       <div class="item">7</div>
  54.       <div class="item">8</div>
  55.       <div class="item">9</div>
  56.     </div>
  57.     <h2>CSS选择器学习</h2>
  58.     <h4>2020年4月7号</h4>
  59.   </body>
  60. </html>
  • 显示效果
  • style里面添加下面样式
    1.    /* 父子选择器 */
    2.     body > div {
    3.       border: 3px solid white;
    4.     }
  • 显示效果
  • style里面添加下面样式
    1.     /* 同级相邻选择器（后面一个） */
    2.     .item#center + .item {
    3.       background-color: lightgreen;
    4.     }
  • 显示效果
  • style里面添加下面样式
    1.    /* 同级相邻选择器（后面全部） */
    2.     .item#center ~ .item {
    3.       background-color: violet;
    4.     }
  • 显示效果

伪类选择器

不分组匹配

  • style里面添加下面样式
    1.    /* 伪类选择器（不分组匹配） */
    2.     /* 匹配第一个子元素 */
    3.     .container > :first-child {
    4.       background-color: lime;
    5.     }
  • 显示效果
  • style里面添加下面样式
    1.      /* 匹配最后一个子元素 */
    2.     .container > :last-child {
    3.       background-color:olivedrab;
    4.     }
  • 显示效果
  • style里面添加下面样式
    1.    /* 匹配任何一个子元素 */
    2.     .container > :nth-child(4) {
    3.       background-color: mediumblue;
    4.     }
  • 显示效果
  • style里面添加下面样式
    1.   /* 匹配倒数任何一个子元素 */
    2.     .container > :nth-last-child(4) {
    3.       background-color: midnightblue;
    4.     }
  • 显示效果
  • style里面添加下面样式
    1.     /* 匹配倒数偶数元素 */
    2.     .container > :nth-child(even) {
    3.       background-color:tomato;
    4.     }
  • 显示效果
  • style里面添加下面样式
    1.     /* 将ID选择器样式注释掉，因为权重大于类选择器 */
    2.     /* #center {
    3.       background-color: slateblue;
    4.     } */
    5.     /* 匹配倒数奇数元素 */
    6.     .container > :nth-child(odd) {
    7.       background-color: yellowgreen;
    8.     }
  • 显示效果
  • style里面添加下面样式
    1.     /* 匹配前四个元素 */
    2.     .container > :nth-child(-n + 4) {
    3.       background-color: red;
    4.     }
  • 显示效果

  • style里面添加下面样式

    2.    /* 从第6个开始,选择剩下的所有元素 */
    3.           .container > :nth-child(n +6) {
    4.       background-color:seagreen;
    5.     }
  • 显示效果

伪类选择器

分组匹配

HTML源码

  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.       /* 类选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 后代选择器 */
  23.       .container .item {
  24.         border: 1px solid black;
  25.       }
  26.  </style>
  27.   </head>
  28.   <body>
  29.     <div class="container">
  30.       <div class="item">1</div>
  31.       <div class="item">2</div>
  32.       <div class="item">3</div>
  33.       <div class="item">4</div>
  34.       <div class="item" id="center">5</div>
  35.       <span class="item">6</span>
  36.       <span class="item">7</span>
  37.       <span class="item">8</span>
  38.       <sapn class="item">9</span>
  39.     </div>
  40.     <h2>CSS选择器学习</h2>
  41.     <h4>2020年4月7号</h4>
  42.   </body>
  43. </html>
  • style里面添加下面样式
    1.     /* 伪类选择器（分组匹配） */
    2.     /* 匹配span第一个子元素 */
    3.     .container > span:first-of-type{
    4.         background-color: orangered;
    5.     }
  • 显示效果
  • style里面添加下面样式
    1.       /* 匹配span最后一个子元素 */
    2.     .container > span:last-of-type{
    3.         background-color:sienna;
    4.     }
  • 显示效果
  • style里面添加下面样式
    1.     /* span分组第三个 */
    2.     .container > span:nth-of-type(3) {
    3.       background-color: springgreen;
    4.     }
  • 显示效果
  • style里面添加下面样式
    1.     /* span分组前三个 */
    2.     .container > span:nth-child(-n + 3){
    3.         background-color: springgreen;
    4.     }
  • 显示效果

其他伪类

html源码

  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.       /* 类选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 后代选择器 */
  23.       .container .item {
  24.         border: 1px solid black;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div class="container">
  30.       <div class="item">1</div>
  31.       <div class="item">2</div>
  32.       <div class="item">3</div>
  33.       <div class="item">4</div>
  34.       <div class="item">5</div>
  35.       <div class="item">6</div>
  36.       <div class="item">7</div>
  37.       <div class="item">8</div>
  38.       <div class="item">9</div>
  39.     </div>
  40.   </body>
  41. </html>
  • 初步预览效果
  • :root伪类
  • style里面添加下面样式
    1.     /* :root伪类 */
    2.     :root {
    3.       background-color: yellow;
    4.     }
  • 显示效果
  • a:hover伪类
    1.     <div class="item">6</div>
  • 上面源码修改成下面源码
    1.     <div class="item">
    2.       <a href="http://www.php.cn" target="_blank" >php官网</a>
    3.     </div>
    -在style里面添加下面样式
    1.     /* a:hover伪类 */
    2.     a:hover {
    3.       background-color: red;
    4.     }
  • 显示效果

学习总结

1.伪类学习感觉很重要，对学习帮助很大，希望以后可以常用

2.经过老师讲解后感觉伪类很好理解

3.似乎还是对display属性掌握不好，需要加深对display理解

上一条：centos config nodeJs下一条：css基础 (选择器的使用与分类)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多