登录  /  注册
博主信息
博文 8
粉丝 0
评论 0
访问量 7947
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
元素选择器、伪类和伪元素(:target、:focus等的)
努力努力再努力
原创
1209人浏览过

元素选择器:简单选择器、上下文选择器、伪类选择器

举例一个九宫格

  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. width: 300px;
  11. height: 300px;
  12. display: grid;
  13. grid-template-columns: repeat(3, 1fr);
  14. gap: 5px;
  15. }
  16. .item {
  17. font-size: 2rem;
  18. background-color: lightskyblue;
  19. display: flex;
  20. justify-content: center;
  21. align-items: center;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <!-- 快捷方式 .container>.item{$}*9 -->
  27. <div class="container">
  28. <div class="item" id="one">1</div>
  29. <div class="item">2</div>
  30. <div class="item">3</div>
  31. <div class="item">4</div>
  32. <div class="item center">5</div>
  33. <div class="item">6</div>
  34. <div class="item">7</div>
  35. <div class="item">8</div>
  36. <div class="item">9</div>
  37. </div>
  38. </body>
  39. </html>

1.简单选择器:标签选择器、id选择器、类选择器

优先级:tag<class <id 而*属于元素级别

  1. /*1.标签选择器 */
  2. body {
  3. background-color: antiquewhite;
  4. }
  5. /* 2.类选择器:对应着html中的class属性*/
  6. .item {
  7. background-color: aquamarine;
  8. }
  9. /*类名有两个的选择器 */
  10. .item.center {
  11. background-color: seagreen;
  12. }
  13. /* 3.id选择器:对应着html中的id属性 */
  14. /* id选择器目前用于二种场景:form表单 和 锚点 */
  15. /* 第一个 */
  16. #one {
  17. background-color: sienna;
  18. }
  19. /* #one和.item前面并没有指定标签,默认就是*, *#one和*.item*/
  20. /* 层叠样式表, 相同元素,后面追加的样式会覆盖前面的样式*/
  21. *#one {
  22. background-color: slateblue;
  23. }
  24. /* 样式会发生改变,则说明 类的优先级大于* 即class>* */
  25. .item#one {
  26. background-color: firebrick;
  27. }
  28. /* 样式会发生改变 ,因为id的优选级别大于class类,即id>class */
  29. #one.item {
  30. background: navy;
  31. }
  32. /* * :属于元素级别 */
  33. /* 简单选择器的优先级 :* < class < id */

2.上下文选择器:后代选择器(空格)、父子选择器(>)、同级相邻选择器(+)、同级所有选择器(~)

  1. /* 1.后代选择器: 使用空格 选择.container 下面的所有div标签*/
  2. .container div {
  3. border: 3px solid #000;
  4. }
  5. /* 2.父子选择器 : >*/
  6. body > div {
  7. border: 5px solid coral;
  8. }
  9. /* 3.同级别相邻选择器 : + 选择最近的且在html中位于选中元素的下方*/
  10. /* 给6添加样式 */
  11. .item.center + .item {
  12. background-color: palegreen;
  13. }
  14. /* 4.统计所有选择器:~ 选择选中元素在html下面的所有同级元素 */
  15. /* 给 6,7,8,9添加样式 */
  16. .item.center ~ .item {
  17. background-color: peru;
  18. }

3.伪类选择器:不分组和分组

A、分组

(1)匹配第一个元素::first-child

(2)匹配最后一个元素::last-child

(3)匹配任意一个元素::nth-child(n)、:nth-last-child(n) n从1开始 当n表示表达式 的时候从0开始 即:nth-child(n+1)

(4)匹配基数单元格::nth-child(2n)和:nth-child(even)

(5) 匹配偶数单元格::nth-child(2n-1)和:nth-child(odd)

  1. /* 匹配.container下的第一个子元素 */
  2. .container > .item:first-child {
  3. background-color: seagreen;
  4. }
  5. /* 匹配.container下的最后一个子元素 */
  6. .container > .item:last-child {
  7. background-color: sandybrown;
  8. }
  9. /* 匹配.container下的任意一个子元素 :nth-child(n) 在css中 索引是以1开始*/
  10. .container > .item:nth-child(3) {
  11. background-color: slateblue;
  12. }
  13. /* 只是选择偶数个的单元格 2种方式 :nth-child(2n) 和 :nth-child(even) */
  14. .container > .item:nth-child(2n) {
  15. background: pink;
  16. }
  17. .container > .item:nth-child(even) {
  18. background-color: seagreen;
  19. }
  20. /* 只是选择基数个的单元格 2种方式 :nth-child(2n-1) 和 :nth-child(odd) */
  21. .container > .item:nth-child(2n-1) {
  22. background: springgreen;
  23. }
  24. .container > .item:nth-child(odd) {
  25. background: steelblue;
  26. }
  27. /* 从指定定位置开始::nth-child(n + 4) 此时n是从0开始,从4开始包括第四个选择剩下所有的元素 */
  28. .container > .item:nth-child(n + 4) {
  29. background-color: blanchedalmond;
  30. }
  31. /* 选择前三个元素 :nth-child(-n + 3) n从0开始 */
  32. /* -0 + 3 = 3
  33. -1 + 3 = 2
  34. -2 + 3 = 1 */
  35. .container > .item:nth-child(-n + 3) {
  36. background-color: lavender;
  37. }
  38. /* 选择最后三个元素 */
  39. .container > .item:nth-last-child(-n + 3) {
  40. background-color: lavender;
  41. }
  42. /* 取第八个即倒数第二个 用倒数的方式更加直观*/
  43. .container > .item:nth-last-child(2) {
  44. background-color: coral;
  45. }

B.分组

(1)匹配指定类型的第一个元素::first-of-type

(2)匹配指定类型最后一个元素::last-of-type

(3)匹配任意一个元素::nth-of-type(3))、:nth-last-of-type n从1开始 当n表示表达式 的时候从0开始 即:nth-last-of-type(-n + 2)

(4)匹配基数院::nth-of-type(2n)和:nth-of-type(even)

(5) 匹配偶数单元格::nth-of-type(2n-1)和:nth-of-type(odd)

  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. width: 300px;
  11. height: 300px;
  12. display: grid;
  13. grid-template-columns: repeat(3, 1fr);
  14. gap: 5px;
  15. }
  16. .item {
  17. font-size: 2rem;
  18. background-color: lightskyblue;
  19. display: flex;
  20. justify-content: center;
  21. align-items: center;
  22. }
  23. /* 分两步:1. 元素按类型进行分组
  24. 2. 在分组中根据索引进行选择 */
  25. /* 匹配分组中div的第一个 需要制定类型即div 还是 span 不指定或者填写item 则会选中div和span的第一个元素 */
  26. .container > div:first-of-type {
  27. background-color: #fff;
  28. }
  29. /* 匹配分组中的span最后一个元素 */
  30. .container > span:last-of-type {
  31. background-color: peru;
  32. }
  33. /* 匹配sapn中的任意一个元素 n从1开始 */
  34. .container > span:nth-of-type(3) {
  35. background-color: seagreen;
  36. }
  37. /* 匹配span中前三个元素 n从0考试*/
  38. .container > span:nth-of-type(-n + 3) {
  39. background-color: red;
  40. }
  41. /* 匹配span中的最后两个元素 */
  42. .container > span:nth-last-of-type(-n + 2) {
  43. background-color: sandybrown;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <!-- 快捷方式 .container>.item{$}*9 -->
  49. <div class="container">
  50. <div class="item">1</div>
  51. <div class="item">2</div>
  52. <div class="item">3</div>
  53. <!-- 上下分组 -->
  54. <span class="item">4</span>
  55. <span class="item">5</span>
  56. <span class="item">6</span>
  57. <span class="item">7</span>
  58. <span class="item">8</span>
  59. <span class="item">9</span>
  60. </div>
  61. </body>
  62. </html>

伪类和伪元素

伪类前面是双冒号:例如 ::selection、::before、::after

为元素前面是单冒号:例如 :target、:focus、:not( )

  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. /* 隐藏登陆菜单 */
  9. #login-form {
  10. display: none;
  11. }
  12. /* 去掉下划线 */
  13. a {
  14. text-decoration: none;
  15. }
  16. /* :target: 必须id配合,实现锚点操作 */
  17. /* 当前#login-form的表单元素被a的锚点激活的时候执行, 激活的时候出现表单 */
  18. #login-form:target {
  19. display: block;
  20. }
  21. /* :focus 获取焦点 */
  22. input:focus {
  23. background-color: seashell;
  24. }
  25. /* :::selection 选中文本的时候背景色 */
  26. li input::selection {
  27. background-color: seagreen;
  28. }
  29. /* :not( ) 用于不满足条件元素 */
  30. .list > li:not(:nth-of-type(3)) {
  31. color: red;
  32. }
  33. /* ::before 在什么之前生成元素*/
  34. .list::before {
  35. content: "购物车";
  36. color: blue;
  37. font-size: 1.2rem;
  38. }
  39. /* ::after 在什么之后产生 */
  40. .list::after {
  41. content: "结算中";
  42. color: seagreen;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <a href="#login-form">我要登陆</a>
  48. <!-- <button onclick="location='#login-form'">点击登录</button> -->
  49. <form action="" method="POST" id="login-form">
  50. <label for="email">邮箱:</label>
  51. <input id="email" name="emial" type="email" />
  52. <lable for="passwotd">密码:</lable>
  53. <input type="password" name="password" name="password" />
  54. <button>登陆</button>
  55. </form>
  56. <hr />
  57. <ul class="list">
  58. <li>item1</li>
  59. <li>item2</li>
  60. <li>item3</li>
  61. <li>item4</li>
  62. </ul>
  63. </body>
  64. </html>
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:有张图片就好了
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学