微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > Chapter4 选择器与表格
博主信息
博文 9
粉丝 0
评论 7
访问量 8924
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Chapter4 选择器与表格
无关
原创
749人浏览过

一、表格之选择器

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>
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：伪类在前端模块化编程中很有用的, 用一个class做为入口 内部元素全部用伪类进行匹配控制, 这是常用的技巧
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
1条评论
武 2020-06-23 14:03:11
收到。谢谢老师！
1楼
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录