search

博客列表 >Chapter4 选择器与表格

Chapter4 选择器与表格

无关
无关原创
2020年06月23日 13:04:11561浏览

一、表格之选择器

1、简单选择器-快餐店点菜菜单：

1.1效果图：

1.2代码

  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.     <style>
  8. /* grid:网格布局；
  9. container：容器，一般是块级元素，也可以设为行内元素；
  10. item：项目；
  11. row:行，column：列；
  12. cell：单元格，grid line:网格线 */
  13. /* 快餐店点菜：grid网格布局实现 */
  14. .head{   
  15.     width: 400px;
  16.     display:grid;   
  17.     gap: 5px;
  18.     }
  19. .item1{
  20.     font-size: 2rem;
  21.     background-color: rgba(11, 184, 236, 0.993);
  22.     display:inline-flex;
  23.     justify-content: center;
  24.     align-items:center;
  25. }
  26. .container{
  27. /* W300=width: 300px;类同 */
  28.     width: 400px;
  29.     height: 400px;
  30.      /* display:grid--显示块级元素
  31.     display:inline-grid--显示行内元素 */![](https://img.php.cn/upload/image/481/936/382/1592776683308501.png)
  32.     display:grid;
  33.     grid-template-columns: repeat(4,1fr);
  34.     gap: 5px;
  35. }
  36. .item{
  37.     font-size: 1rem;
  38.     background-color: rgb(132, 204, 99);
  39.     display:inline-flex;
  40.     justify-content: center;
  41.     align-items:center;
  42. }
  43.    /* 简单选择器 */
  44.    /* 元素（=标签）选择器 */
  45.    body{
  46.     background-color: rgb(170, 223, 172);
  47.    }
  48.       /* 类选择器：对应着html标签中的class属性 */
  49.    .item{
  50.        border:2px solid rgb(98, 28, 190);
  51.    }  
  52. /* 多个类复合应用 */
  53.    .item.center{
  54.        background-color: rgb(178, 223, 17);
  55.    }
  56.    /* .item.first{
  57.        background-color: lightpink;
  58.    } */
  59.    /* id选择器 */
  60.    .item#first{
  61.        background-color: lightpink;
  62.    }
  63.    /* 层叠样式表，相同元素后面追加的样式会覆盖前面的样式 */
  64.     /* *：属于元素级别 *.item=.item*/
  65.    .item#first{
  66.        background-color: yellow;
  67.    }     
  68.    *.item#first{
  69.        background-color: rgb(0, 140, 255);
  70.    }
  71.    #first.item{
  72.        background-color: red;
  73.    } 
  74.    /* 元素<class<id */
  75.    /* id，class可以添加到任何元素上，所以可以省略 */
  76.    /* id 选择器的应用场景目前只有两种场景：1、表达元素 2、锚点 。将逐渐被class代替。*/
  77.    </style>
  78. </head>
  79. <body>
  80.     <div class="head">
  81.         <div class="item1 center">欢迎光临ABC快餐店</div>
  82.         <div class="item1 center">欢迎选餐！</div>
  83.     </div>
  84.     <br/>  
  85.      <div class="container">              
  86.         <div class="item" id="first">A1米饭</div>
  87.         <div class="item">A2馒头</div>
  88.         <div class="item">A3煎饼</div>
  89.         <div class="item">A4油条</div>
  90.         <div class="item">B1炒鸡</div>
  91.         <div class="item center">B2蒸鱼</div>
  92.         <div class="item center">B3烤鸭</div>
  93.         <div class="item ">B4焖肉</div>
  94.         <div class="item">C1炒青菜</div>
  95.         <div class="item center">C2土豆丝</div>
  96.         <div class="item center">C3番茄炒蛋</div>
  97.         <div class="item">C4地三鲜</div>
  98.         <div class="item">D1南瓜粥</div>
  99.         <div class="item">D2小米粥</div>
  100.         <div class="item">D3八宝粥</div>
  101.         <div class="item">D4红豆粥</div>
  102.       </div>        
  103. </body>
  104. </html>

2、上下文选择器-快餐店点菜菜单：

2.1效果图：

2.2代码

  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.     <style>
  8. .head{   
  9.    width: 400px;
  10.    display:grid;  
  11.    gap: 5px;
  12. }
  13. .item1{
  14.    font-size: 2rem;
  15.    background-color: rgba(11, 184, 236, 0.993);
  16.    display:inline-flex;
  17.    justify-content: center;
  18.    align-items:center;
  19. }
  20. .container{
  21.     width: 400px;
  22.     height: 400px;  
  23.     display:grid;
  24.     grid-template-columns: repeat(4,1fr);
  25.     gap: 5px;
  26. }
  27. .item{
  28.     font-size: 1rem;
  29.     background-color: rgb(132, 204, 99);
  30.     display:inline-flex;
  31.     justify-content: center;
  32.     align-items:center;
  33. }
  34. body{
  35. background-color: lightgray;
  36. }
  37. /* 1、 后代选择器:空格 */
  38. .head div{
  39.     border:2px solid lime;
  40. }
  41. .container div {
  42.     border:3px solid lightcoral;
  43. }
  44. /* 2、父子选择器 */
  45. body>div{
  46.     border:5px solid red;
  47. }
  48. /* 3、同级相邻选择器 */
  49. .item.center+.item{
  50.     /* 此时B2+相邻的是B3;C2C3+相邻=C2相邻的C3+C3相邻的C4 */
  51.     background-color: lightgreen;
  52. }
  53. /* 4 、同级所有选择器 */
  54. .item.first1~.item{
  55.     background-color: lightsalmon;
  56. }
  57.    </style>
  58. </head>
  59. <body>    
  60.     <div class="head">
  61.         <div class="item1 center">欢迎光临ABC快餐店</div>
  62.         <div class="item1 center">欢迎选餐！</div>
  63.     </div>
  64.     <br/>  
  65.      <div class="container">              
  66.         <div class="item" id="first">A1米饭</div>
  67.         <div class="item">A2馒头</div>
  68.         <div class="item">A3煎饼</div>
  69.         <div class="item">A4油条</div>
  70.         <div class="item">B1炒鸡</div>
  71.         <div class="item center">B2蒸鱼</div>
  72.         <div class="item ">B3烤鸭</div>
  73.         <div class="item ">B4焖肉</div>
  74.         <div class="item">C1炒青菜</div>
  75.         <div class="item center">C2土豆丝</div>
  76.         <div class="item center">C3番茄炒蛋</div>
  77.         <div class="item">C4地三鲜</div>
  78.         <div class="item first1">D1南瓜粥</div>
  79.         <div class="item">D2小米粥</div>
  80.         <div class="item">D3八宝粥</div>
  81.         <div class="item">D4红豆粥</div>
  82.       </div>        
  83. </body>
  84. </html>

3、伪类选择器-不分组-快餐店点菜菜单：

3.1效果图：

3.2代码

  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.     <style>
  8. .head{   
  9.    width: 400px;
  10.    display:grid;  
  11.    gap: 5px;
  12. }
  13. .item1{
  14.    font-size: 2rem;
  15.    background-color: rgba(11, 184, 236, 0.993);
  16.    display:inline-flex;
  17.    justify-content: center;
  18.    align-items:center;
  19. }
  20. .container{
  21.     width: 400px;
  22.     height: 400px;  
  23.     display:grid;
  24.     grid-template-columns: repeat(4,1fr);
  25.     gap: 5px;
  26. }
  27. .item{
  28.     font-size: 1rem;
  29.     background-color: rgb(132, 204, 99);
  30.     display:inline-flex;
  31.     justify-content: center;
  32.     align-items:center;
  33. }
  34. body{
  35. background-color: lightgray;
  36. }
  37.  /* 匹配第一个子元素 .container>*:first-child等于.container>.item:first-child*/
  38.  .container>*:first-child{
  39.      background-color: lime;
  40.      color:brown;
  41.  }
  42. .container>.item:first-child {
  43.        background-color: lightblue;
  44.    }
  45. /* 最后一个子元素 */
  46. .container>:last-child{
  47.        background-color: lightpink;
  48.   }
  49.  /* 选第三个 ,索引从第1开始*/ 
  50. .container>:nth-child(3){
  51.         background-color: lightgreen;       
  52.        }
  53. /* 只选择偶数单元格 ,even-偶数*/
  54.  .container>:nth-child(even){
  55.         background-color: lightgreen;
  56.     }
  57. /* 只选择偶数单元格 ，odd-奇数*/
  58. .container>:nth-child(odd){
  59.         background-color: lightcoral;       
  60.        }
  61. /* 从指定位置开始，选择剩下的所有元素,从第5个开始后面所有元素如下： */
  62. .container>.item:nth-child(n+5){
  63.         background-color: lightslategrey 
  64.        }
  65.  /* 只取前2个 */
  66. .container>.item:nth-child(-n+2){
  67.         background-color: lightgreen;       
  68.        }
  69.  /* 只取最后三个 */
  70.         .container>.item:nth-last-child(-n+3){
  71.         background-color: lightblue; 
  72.         color:mediumorchid;
  73.         }       
  74. /* 取第12个，用倒数方式更 直观*/
  75.         .container>.item:nth-last-child(5){
  76.         background-color: yellow;       
  77.        }
  78. /* 取第7-10个,怎么取？？*/   
  79.  /* 层叠样式表，相同元素后面追加的样式会覆盖前面的样式 */
  80.    </style>
  81. </head>
  82. <body>    
  83.     <div class="head">
  84.         <div class="item1 center">欢迎光临ABC快餐店</div>
  85.         <div class="item1 center">欢迎选餐！</div>
  86.     </div>
  87.     <br/>  
  88.      <div class="container">              
  89.         <div class="item" id="first">A1米饭</div>
  90.         <div class="item">A2馒头</div>
  91.         <div class="item">A3煎饼</div>
  92.         <div class="item">A4油条</div>
  93.         <div class="item">B1炒鸡</div>
  94.         <div class="item center">B2蒸鱼</div>
  95.         <div class="item ">B3烤鸭</div>
  96.         <div class="item ">B4焖肉</div>
  97.         <div class="item">C1炒青菜</div>
  98.         <div class="item center">C2土豆丝</div>
  99.         <div class="item center">C3番茄炒蛋</div>
  100.         <div class="item">C4地三鲜</div>
  101.         <div class="item first1">D1南瓜粥</div>
  102.         <div class="item">D2小米粥</div>
  103.         <div class="item">D3八宝粥</div>
  104.         <div class="item">D4红豆粥</div>
  105.       </div>        
  106. </body>
  107. </html>

4、伪类选择器-分组-快餐店点菜菜单：

4.1效果图：

4.2代码

  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.     <style>
  8. .head{   
  9.    width: 400px;
  10.    display:grid;  
  11.    gap: 5px;
  12. }
  13. .item2{
  14.    font-size: 2rem;
  15.    background-color: yellow;
  16.    display:inline-flex;
  17.    justify-content: center;
  18.    align-items:center;
  19. }
  20. .container{
  21.     width: 400px;
  22.     height: 400px;  
  23.     display:grid;
  24.     grid-template-columns: repeat(4,1fr);
  25.     gap: 5px;
  26. }
  27. .item{
  28.     font-size: 1rem;
  29.     background-color: rgb(132, 204, 99);
  30.     display:inline-flex;
  31.     justify-content: center;
  32.     align-items:center;
  33. }
  34. .item1{
  35.     font-size: 1rem;
  36.     background-color: rgb(99, 153, 204);
  37.     display:inline-flex;
  38.     justify-content: center;
  39.     align-items:center;
  40. }
  42. body{
  43. background-color: lightgray;
  44. }
  45.  /* 分组结构伪类分二步 */
  46. /* 1、元素按类型分组 */
  47. /* 2、在分组中根据索引选择 */
  49. /* 取div组第一个 */
  50. .container div:first-of-type {
  51.     background-color: red;
  52.    color:yellow;
  53. }
  54. /* 取div最后一个 */
  55. .container div:last-of-type {
  56.     background-color: blue;
  57. }
  58. /* 取span组第一个 */
  59. .container span:first-of-type {
  60.     background-color: violet;
  61. }
  62. /* 取span组最后一个 */
  63. .container span:last-of-type {
  64.     background-color: yellow;
  65. }
  66. /* 在分组中匹配任何一个*/
  67. .container div:nth-of-type(3) {
  68.     background-color: rgb(89, 0, 255);
  69. }
  70. .container span:nth-of-type(3) {
  71.     background-color: rgb(89, 0, 255);
  72. }
  73. /* 在分组中匹配任何几个，n=0,正数*/
  74. .container span:nth-of-type(-n+2) {
  75.     background-color:red;
  76. } 
  77. /* 在分组中匹配任何几个，n=0,倒数*/
  78. .container span:nth-last-of-type(-n+2) {
  79.     background-color:yellow;
  80. } 
  81.    </style>
  82. </head>
  83. <body>    
  84.     <div class="head">
  85.         <div class="item2 center">欢迎光临ABC快餐店</div>
  86.         <div class="item2 center">欢迎选餐！</div>
  87.     </div>
  88.     <br/>  
  89.      <div class="container">              
  90.         <div class="item" >A1米饭</div>
  91.         <div class="item">A2馒头</div>
  92.         <div class="item">A3煎饼</div>
  93.         <div class="item">A4油条</div>
  94.         <div class="item">B1炒鸡</div>
  95.         <div class="item" >B2蒸鱼</div>
  96.         <div class="item">B3烤鸭</div>
  97.         <div class="item">B4焖肉</div>
  99.         <span class="item1">C1炒青菜</span>
  100.         <span class="item1" >C2土豆丝</span>
  101.         <span class="item1" >C3番茄炒蛋</span>
  102.         <span class="item1">C4地三鲜</span>
  103.         <span class="item1" >D1南瓜粥</span>
  104.         <span class="item1">D2小米粥</span>
  105.         <span class="item1">D3八宝粥</span>
  106.         <span class="item1">D4红豆粥</span>
  107.       </div>     
  108. </body>
  109. </html>

二、伪类和伪元素

1、伪类

CSS 伪类：用于向某些选择器添加特殊的效果。
伪类分为：状态伪类（UI 伪类）和结构性伪类。
1.1 状态伪类选择器
状态伪类属性 描述
:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
:target 应用于链接点击后指向元素
1.2 结构伪类选择器
结构伪类选择器属性 描述
:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的唯一一个子元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty 选择的元素里面没有任何内容。

2、伪元素

2.1 CSS 伪元素

伪元素：用于向某些选择器设置特殊效果。是对元素中的特定内容进行操作，而不是描述状态

伪元素属性 描述
:first-letter 选择元素文本的第一个字（母）
:first-line 选择元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最后面添加新内容。

3、伪类与伪元素的区别

伪类 伪元素
单冒号(:) 双冒号(::)
效果可以通过添加一个实际的类来达到 效果则需要通过添加一个实际的元素来达到

三、常用伪类和伪元素实例

1、登录网址

1.1效果图—:target, :focus。

1>

2>

3>

1.2代码：
  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>常用伪类和伪元素01:</title>
  7.     <style>
  8.         #login-form{
  9.             display:none;
  10.         }
  11.         /*  :target 必须与ID配合，实现锚点操作  */
  12.         /* 当前#login-form的表单元素被a的锚点激活时执行 */
  13.         #login-form:target{
  14.             display:block;
  15.         }
  16.         /* :focus:当获取焦点时执行 */
  17.         input:focus{
  18.             background-color: lightcyan;
  19.         }
  20.         /* ::selection:设置选中文本的前景色和背景色 */
  21.         input::selection{
  22.             color:white;
  23.             background-color: blue;
  24.         }  
  25.         </style>
  26. </head>
  27. <body>
  28.     <!-- <a href="">我要登录山大</a> -->
  29.     <button onclick="location='#login-form'">点击登录山大</button>  
  30.     <form
  32.     <form action=" " method="post" id="login-form">
  33.         <label for="name">姓名： </label>
  34.              <input type="name" name="name" id="name">  
  35.              <br/> 
  36.         <label for="email">邮箱：</input>
  37.             <input type="email" name="email" id="email"/>
  38.             <br/>  
  39.         <label for="password">密码：</label>
  40.              <input type="password" name="password" id="password"/>
  41.              <br/>           
  42.         <button ><a href="https://www.sdu.edu.cn/">登录</a></button>  
  44.     </form>     
  45. </body>
  46. </html>

2、表单统计—:not, ::before, ::after。

2.1效果图：

2.2代码：
  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>常用伪类和伪元素02:</title>
  7.     <style>
  8.          /* :not():选择不满足条件的元素 */
  9.          .list >:not(:nth-of-type(3)){
  10.             color:orange;
  11.         }  
  12.         /* 创建伪元素，伪元素:页面中不存在，无代码，浏览器自动生成     */
  13.         /* ::before ：在表单前面创建*/
  14.         .list::before{
  15.             content:'满分学员名单:';
  16.             color:red;
  17.             font-size:1.5rem;
  18.             border-bottom:1px solid blue;
  19.             margin-left: -20px;     
  20.         }
  21.         /* ::after：在表单后面创建*/
  22.         .list::after{
  23.             content:'人数小计:';
  24.             color:red;
  25.             font-size:1.5rem;          
  26.             border-top:  1px solid blue;
  27.             margin-left: -20px;           
  28.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <!--  ul.list>li{item$}*6,回车如下：  -->
  34.     <ul class="list">
  35.         <li>张三</li>
  36.         <li>李四</li>
  37.         <li>孙五</li>
  38.         <li>赵六</li>
  39.         <li>周七</li>
  40.         <li>郑八</li>
  41.     </ul>    
  42. </body>
  43. </html>
上一条：天融信防火墙命令行模式下一条：浮动元素高度塌陷产生的原因与解决方案 使用定位与浮动完成一个三列经典布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
武2020-06-23 14:03:111楼
收到。谢谢老师！