search

博客列表 >4.6前端入门之CSS选择器

4.6前端入门之CSS选择器

zero
zero原创
2020年04月20日 01:24:09825浏览

CSS选择器

1.简单选择器与ID选择器,类选择器

序号 选择器 描述 举例
1 元素选择器 根据元素标签名称进行匹配 div {...}
2 群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
3 通配选择器 选择全部元素,不区分类型 * {...}
4 属性选择器 根据元素属性进行匹配 *[...]
5 类选择器 根据元素 class 属性进行匹配 *.active {...}
6 id 选择器 根据元素 id 属性进行匹配 *#top {...} 
  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.   </head>
  8.   <style>
  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: lightblue;
  19.   color: white;
  20.   display: flex;
  21.   justify-content: center;
  22.   align-items: center;
  23. }
  24. #first {
  25.   background-color: slateblue;
  26. }
  27. .item[title="hello"] {
  28.   background-color: red;
  29. }
  30. .item[title="php"] {
  31.   background-color: sienna;
  32. }
  33.   </style>
  34.   <body>
  35. <div class="container">
  36.   <div class="item" id="first">1</div>
  37.   <div class="item">2</div>
  38.   <div class="item" title="hello">3</div>
  39.   <div class="item">4</div>
  40.   <div class="item" title="php">5</div>
  41.   <div class="item">6</div>
  42.   <div class="item">7</div>
  43.   <div class="item">8</div>
  44.   <div class="item">9</div>
  45. </div>
  46.   </body>
  47. </html>

效果图

2.上下文选择器

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li 
  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.   </head>
  8.   <style>
  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. .container div {
  24.   border: 2px solid brown;
  25. }
  26. body > div {
  27.   border: 2px solid red;
  28. }
  29. .item.center ~ .item {
  30.   background-color: yellow;
  31. }
  32.   </style>
  33.   <body>
  34. <div class="container">
  35.   <div class="item" id="first">1</div>
  36.   <div class="item">2</div>
  37.   <div class="item" title="hello">3</div>
  38.   <div class="item center">4</div>
  39.   <div class="item" title="php">5</div>
  40.   <div class="item">6</div>
  41.   <div class="item">7</div>
  42.   <div class="item">8</div>
  43.   <div class="item">9</div>
  44. </div>
  45.   </body>
  46. </html>

效果图

3.伪类选择器

3.1 伪类不分组

序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(n) 
  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>
  8. <style>
  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.   * .container :first-child {
  24.     background-color: red;
  25.   }
  26.   .container :nth-child(3) {
  27.     background-color: salmon;
  28.   }
  29.   .container :last-child {
  30.     background-color: lightgreen;
  31.   }
  32.   .container :nth-child(even) {
  33.     background-color: lime;
  34.   }
  35.   .container :nth-last-child(3) {
  36.     background-color: mediumblue;
  37.   }
  38. </style>
  39.   </head>
  40.   <body>
  41. <div class="container">
  42.   <div class="item first">1</div>
  43.   <div class="item">2</div>
  44.   <div class="item">3</div>
  45.   <div class="item">4</div>
  46.   <div class="item center">5</div>
  47.   <div class="item">6</div>
  48.   <div class="item">7</div>
  49.   <div class="item">8</div>
  50.   <div class="item">9</div>
  51. </div>
  52.   </body>
  53. </html>

效果图

3.2伪类分组

序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)
  • 允许使用表达式来匹配一组元素,表达式中的”n”是从”0”开始计数,且必须写到前面
  • “-n”表示获取前面一组元素,正数表示从指定位置获取余下元素
  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>
  8. <style>
  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.   .container span:first-of-type {
  24.     background-color: blueviolet;
  25.   }
  26.   .container div:first-of-type {
  27.     background-color: brown;
  28.   }
  29.   .container span:nth-last-of-type(3) {
  30.     background-color: chocolate;
  31.   }
  32.   .container div:nth-last-of-type(2) {
  33.     background-color: darkcyan;
  34.   }
  35. </style>
  36.   </head>
  37.   <body>
  38. <div class="container">
  39.   <div class="item first">1</div>
  40.   <div class="item">2</div>
  41.   <div class="item">3</div>
  42.   <div class="item">4</div>
  44.   <span class="item center">5</span>
  45.   <span class="item">6</span>
  46.   <span class="item">7</span>
  47.   <span class="item">8</span>
  48.   <span class="item">9</span>
  49. </div>
  50.   </body>
  51. </html>

效果图

3.2表单伪类

序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时，向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :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>Document</title>
  7.   </head>
  8.   <style>
  9. :root {
  10.   background-color: darkkhaki;
  11. }
  12. input:required {
  13.   background-color: white;
  14. }
  15. input:disabled {
  16.   background-color: lightslategray;
  17.   color: red;
  18. }
  19. input:hover {
  20.   background-color: slateblue;
  21. }
  22.   </style>
  23.   <body>
  24. <form action="" id="register"></form>
  26. <!-- 第一个表单分组 -->
  27. <fieldset name="base" form="register">
  28.   <legend>基本信息</legend>
  29.   <section>
  30.     <input
  31.       type="email"
  32.       name="email"
  33.       placeholder="您的邮箱"
  34.       form="register"
  35.       required
  36.       autofocus
  37.     />
  39.     <input
  40.       type="password"
  41.       name="psw1"
  42.       placeholder="您的密码"
  43.       form="register"
  44.       required
  45.     />
  47.     <input
  48.       type="password"
  49.       name="psw2"
  50.       placeholder="重复密码"
  51.       form="register"
  52.     />
  53.   </section>
  54. </fieldset>
  55. <fieldset name="base" form="register">
  56.   <legend>选填信息</legend>
  57.   <section>
  58.     <input
  59.       type="text"
  60.       name="nicheng"
  61.       placeholder="您的昵称"
  62.       form="register"
  63.       autofocus
  64.     />
  66.     <input
  67.       type="number"
  68.       name="nianling"
  69.       placeholder="您的年龄"
  70.       form="register"
  71.     />
  73.     <input
  74.       type="text"
  75.       name="gexing"
  76.       placeholder="个性签名"
  77.       form="register"
  78.     />
  79.     <input
  80.       type="text"
  81.       name="tishi"
  82.       placeholder="提示：XXXXXXX"
  83.       form="register"
  84.       disabled
  85.     />
  86.   </section>
  87. </fieldset>
  88. <button
  89.   type="submit"
  90.   form="register"
  91.   formenctype="register.php"
  92.   formmethod="POST"
  93.   formtarget="_blank"
  94. >
  95.   提交
  96. </button>
  97.   </body>
  98. </html>

效果图

4.总结

4.1 简单选择器

  • 最常用的是: 元素选择器, 类选择器, id 选择器
  • 当 class,id 选择器不限定被修改的元素类型时, 星号”*“可以省略

4.2 上下文选择器

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li

4.3 伪类选择器

4.3.1 伪类选择器-不分组匹配

场景 描述
结构伪类 根据子元素的位置特征进行选择
表单伪类 根据表单控件状态特征进行选择
序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(n)

4.3.2 伪类选择器-分组匹配

序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)

4.3.3 表单伪类

序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时，向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :not() 排除与选择器参数匹配的元素
上一条：使用flex布局实现php中文网移动端网页布局下一条：4月17日作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多