Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Chapter4 选择器与表格
Blogger Information
Blog 9
fans 0
comment 7
visits 6034
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
Chapter4 选择器与表格
无关
Original
559 people have browsed it

一、表格之选择器

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>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：伪类在前端模块化编程中很有用的, 用一个class做为入口 内部元素全部用伪类进行匹配控制, 这是常用的技巧
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
1 comments
武 2020-06-23 14:03:11
收到。谢谢老师！
1 floor
Author's latest blog post