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

第四课：选择器与表格

选择器：简单选择器[标签选择器]
  • 描述：浏览器能直接显示出来的选择器及为简单选择器
  • 元素选择器、类选择器、ID选择器、伪类。
  • 注意：复合类样式[层叠]的style中.class 之间不能有空格,且id,class可以添加到任何元素上使用！
  • 样式累加 ：相同元素，后面追加的样式会覆盖前面的样式，但是，这个覆盖样式要遵循样式优先级的问题；
  • 元素选择器 < 类选择器 < id选择器 < 内联样式
  • 区别：#first > 单独的id选择器 #first.itme > #firs 级别
    ID选择器 应用场景 只有二种场景：表单元素，锚点。
  1. <style>
  3. .item{
  4.     ......
  5. }
  6. .item.center{
  7.     .....
  8. }
  9. /*id 选择器 [以“#”代表]*/
  10. #nav_id{
  11.     ....
  12. }
  13. </style>
  14. <div  class="item center" id="nav_id{
  15.     ....
  16. }"></div>

上下文选择器

  • 后代选择器 [中间有空格]
  1. <style>
  2. .container div{
  3.     ......
  4. }
  5. </style>
  6. <div class="container">
  7.     <div class="item">1</div>
  8.     <div class="item">2</div>
  9.     <div class="item">3</div>
  10. </div>
  • 父子选择器 [用“>”来标示]
  1. <style>
  2. .container > div{
  3.     ......
  4. }
  5. </style>
  6. <div class="container">
  7.     <div class="item">1</div>
  8.     <div class="item">2</div>
  9.     <div class="item">3</div>
  10. </div>
  • 选择器
    在已知自己需要定位到某个目标上的时候可以使用类标签名的方式去定位。
  1. <style>
  2. /*同级相邻选择器*/
  3. .item.center + .item{
  4.     ......
  5. }
  6. /*同级所有选择器*/
  7. .item.center ~ .item{
  8.     ......
  9. }
  10. </style>
  11. <div class="container">
  12.     <div class="item">1</div>
  13.     <div class="item center">2</div>
  14.     <div class="item">3</div>
  15.     <div class="item">4</div>
  16.     <div class="item">5</div>
  17. </div>

伪类选择器 [不分组]（不区分元素类型）省略父元素。

  1. /*
  2.     语法：:first-child{}
  3.     解释：为第个子元素添加属性；
  4.     没有指定具体元素的话，默认就是所有的“*” 依此查询所有的第一个子元素添加
  5.     生效范围是整个HTML文档，所有的父亲
  6.     PS：必须指定一个父元素，尽量用父子关系指定；
  7.     .container :first-child{
  8.     ....
  9.     }
  10. */
  11. <style>
  12.     /*给container下的第一元素添加属性*/
  13.     .container > :first-child{
  14.         ....
  15.     }
  16.     /*给container下的最后一个元素添加属性*/
  17.     .container > :last-child{
  18.         ....
  19.     }
  20.     /*选择第三个，下标从1开始*/
  21.     .container > :nth-chlid(3){
  22.         .....
  23.     }
  24.     /*选择偶数列 even 代替 2n*/
  25.     .container > :nth-chlid(2n){
  26.         ....
  27.     }
  28.     /*选择奇数列 odd 代替 2n-1 */
  29.     .container > :nth-chlid(2n-1){
  30.         ....
  31.     }
  32.     /*从指定位置开始，选择剩下的所有元素*/
  33.     .container .item:nth-chlid(n + 3){
  34.         ....
  35.     }
  36.     /*只取前三个*/
  37.     .container .item:nth-chlid(-n + 3){
  38.         ....
  39.     }
  40.     /*只取最后三个 */
  41.     .container  .item:nth-last-chlid(-n + 3){
  42.         ....
  43.     }
  44.     /*只取最后三个 取后面的用倒数的方式去取*/
  45.     .container   .item:nth-last-chlid(2){
  46.         ....
  47.     }
  49. </style>
  50. <div class="container">
  51.     <div class="item">1</div>
  52.     <div class="item center">2</div>
  53.     <div class="item">3</div>
  54.     <div class="item">4</div>
  55.     <div class="item">5</div>
  56. </div>

伪类选择器 [分组]

  • 分组结构伪类；
    1.对元素按类型进行分组；
    2.在分组中根据索引进行选择；
  1. <style>
  2.     /*不限定的话就对container下的分组每个组里面的最后一个如果要指定，则使用元素的例如：
  3.     .container span:last-of-type{}
  4.     */
  5.     .container :last-of-type{
  6.         ...
  7.     }
  8.     /*匹配任何一个*/
  9.     .container span:nth-of-type(3){
  10.         ......
  11.     }
  12.     /*前三个*/
  13.     .container span:nth-of-type(-n + 3){
  14.         ......
  15.     }
  16.     /*最后二个*/
  17.     .container span:nth-last-of-type(-n + 2){
  18.         ......
  19.     }
  20. </style>
  21. <div class="container">
  22.     <div class="item">1</div>
  23.     <div class="item center">2</div>
  24.     <span class="item">3</span>
  25.     <span class="item">4</span>
  26.     <span class="item">5</span>
  27. </div>
  28. `````
  30. ####伪类/伪元素
  31. - :target 必须和ID配合，实现锚点操作！
  32. - :focus 当获取焦点的时候
  33. - ::selection 只允许设置选中文本的前景色和背景色
  34. - :not 不满足条件的
  35. - ::before 在什么之前生成某些东西
  36. - ::atfer  在什么之后生成某些东西
  37. - 伪类是单冒号，伪元素是双冒号。
  38. ````
  39. <style>
  40.     #login-from{
  41.         display:none;
  42.     }
  43.     #login-from:target{
  44.         display:block;
  45.     }
  46.     input：focus{
  47.         ....
  48.     }
  49.     input::selection{
  50.         color:...;
  51.         backguround-color:...;
  52.     }
  53. </style>
  54. <body>
  56.     <button onclick="location='#login-from'"></botton>
  57.     <form id="login-from">
  58.         <label for="email">邮件</label>
  59.         <input type="text" name="email" id="email">
  60.         <label for="password">邮件</label>
  61.         <input type="text" name="password" id="password">
  62.     </form>
  63.     <hr/>
  64. ------------------------------------------
  65. #### :not（）排除不需要的元素
  66. <style>
  67.     .list > :not(:nth-of-type(3)){
  68.         color:red;
  69.     .list::before{
  70.         content:‘购物车’；
  71.         color:red;
  72.     }
  73.     .list::after{
  74.         content:‘清算中’；
  75.         color:red;
  76.     }
  77. }
  78. </style>
  79.     <ul class="list">
  80.         <li>1</li>
  81.         <li>2</li>
  82.         <li>3</li>
  83.         <li>4</li>
  84.     </ul>
  86. </body>
  87. `
表格的组成部分
说明 语法结构
表格 table
标题 caption
分组 colgroup
表头 thead
主体 <tbody>
底部 tfoot
表格标题 th
行 tr
列 td 
  1. <table>
  2.     <cation>
  3.         员工信息表
  4.     </cation>
  5.     <colgroup>
  6.         <col></col>
  7.         <col></col>
  8.         <col></col>
  9.     </colgroup>
  10.     <thead>
  11.         <tr>
  12.             <th>ID</th>
  13.             <th>name</th>
  14.             <th>passs</th>
  15.         </tr>
  16.     </thead>
  17.     <tbody>
  18.         <tr>
  19.             <td>1</td>
  20.             <td>jack</td>
  21.             <td>123456</td>
  22.         </tr>
  23.     </tbody>
  24.     <tfoot>
  25.         <tr>
  26.             <td>1</td>
  27.             <td>1</td>
  28.             <td>1</td>
  29.         </tr>
  30.     </tfoot>
  31. </table>
  33. `
批改老师：WJWJ

批改状态：合格

老师批语：整体写的不错，建议重要代码附上效果图！
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

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