search

博客列表 >选择器知识点汇总

选择器知识点汇总

phpcn_u202398
phpcn_u202398原创
2020年04月09日 08:34:57604浏览

选择器

1、简单选择器

1.1、 种类

序号 选择器 描述 举例
1 元素选择器 根据元素标签名称进行匹配 div {...}
2 群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
3 通配选择器 选择全部元素,不区分类型 * {...}
4 属性选择器 根据元素属性进行匹配 *[...]
5 类选择器 根据元素 class 属性进行匹配 *.active {...}
6 id 选择器 根据元素 id 属性进行匹配 *#top {...}
  • 元素是使用标签和属性进行描述,所以使用标签和属性来选择元素非常自然和直观
  • 以上 6 种,其实可分为二类: 元素选择器和属性选择器, 其它的只是二者的特例罢了
  • 最常用的是: 元素选择器, 类选择器, id 选择器
  • 当 class,id 选择器不限定被修改的元素类型时, 星号”*“可以省略

html 元素的三大通用属性是: id, class 和 style

代码实例
  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.     div{
  10.         background-color: aquamarine;
  11.         padding: 10px;
  12.     }
  13.     h2,h3,h4{
  14.         color: blue;
  15.         font-size: 16px;
  16.     }
  17. </style>
  18. <body>
  19.    <div>
  20.       <h2>PHP</h2> 
  21.       <h3>HTML</h3>
  22.       <h4>CSS</h4> 
  23.       <h5>javascript</h5>
  24.    </div> 
  25. </body>
  26. </html>

2、 上下文选择器

  • html 文档,看上去就像一颗倒置的”树”,所以是有层级结构的
  • 每一个元素, 在文档中, 都有自己的位置,即上下文关系
  • 所以, 完全可以根据元素的上下文关系,来获取到它们

2.1、 一个元素的四种角色

序号 角色 描述
1 祖先元素 拥有子元素,孙元素等所有层级的后代元素
2 父级元素 仅拥有子元素层级的元素
3 后代元素 与其它层级元素一起拥有共同祖先元素
4 子元素 与其它同级元素一起拥有共同父级元素

2.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.     div{
  10.         background-color: aquamarine;
  11.         padding: 10px;
  12.     }
  13.     div p{
  14.        color: rgb(187, 52, 119);
  15.        font-size: larger;
  16.     }
  17.     div>h3{
  18.         color: darkgoldenrod;
  19.         font-size: 20px;
  20.     }
  21. </style>
  22. <body>
  23.    <div>
  24.        <h3>在正在学习选择器</h3>
  25.       <p>学习使我快乐！</p>
  26.    </div> 
  27. </body>
  28. </html>

3. 伪类选择器

  • 学习之前,先分析上下文选择器的局限性,例如选择同一个父级下的第二个子元素,就没那么简单
  • 而伪类就正好弥补了上下文选择器的短板, 所以伪类,大多数是基于文档中元素结构的
  • 伪: 本意是假的,不存在的意思, 这里是特指, 不需要在元素上添加额外的属性来获取元素
  • 类: 暗指伪类的级别, 仍然是属于”class”级别, 仍然属于属性选择器范畴,级别高于元素选择器

我们重点放在伪类最重要的应用场景:

场景 描述
结构伪类 根据子元素的位置特征进行选择
表单伪类 根据表单控件状态特征进行选择

3.1 结构伪类

3.1.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>
  7. </head>
  8. <style>
  9.     div :last-of-type{
  10.         color: darkgreen;
  11.         font-size: 12px;
  12.     }
  13.     div :first-of-type{
  14.         color: darkorchid;
  15.         font-size: 16px;
  16.     }
  17.     div :nth-of-type(3){
  18.         color: deeppink;
  19.         font-size: 19px;
  20.     }
  21. </style>
  22. <body>
  23.    <div>
  24.        <p>在正在学习选择器</p>
  25.        <p>学习使我快乐！</p>
  26.        <p>在正在学习CSS</p>
  27.        <p>在PHP中文网学习</p>
  28.    </div> 
  29. </body>
  30. </html>
3.1.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”表示获取前面一组元素,正数表示从指定位置获取余下元素

3.3 其它伪类

序号 选择器 描述
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>选择器</title>
  7. </head>
  8. <style>
  9.     div>h1{
  10.         color: deepskyblue;
  11.      }
  12.      div>h1:active{
  13.          color: firebrick;
  14.      }
  16.      div>h2{
  17.          color: gold;
  18.      }
  19.      div>h2:hover{
  20.          color: hotpink;
  21.      }
  22.      div>h3{
  23.          color: red;
  24.      }
  25.      div>h3:link{
  26.          color: sienna;
  27.      }
  28.      div>h4{
  29.          color: springgreen;
  30.      }
  31.      div>h4:visited{
  32.          color: violet;
  33.      }
  34. </style>
  35. <body>
  36.    <div>
  37.        <h1>在正在学习选择器</h1>
  38.        <h2>学习使我快乐！</h2>
  39.        <h3>在正在学习CSS</h3>
  40.        <h4>在PHP中文网学习</h4>
  41.    </div> 
  42. </body>
  43. </html>

选择器学期总结

本节课学习了选择器的内容包括：简单选择器，上下文选择器，伪类选择器。在这些知识中上下文选择器是新的一个知识点，在以前没有使用，通过这节课的学习使我学会的上下文选择器的使用方法。伪类选择器让我感觉到了其中的乐趣，鼠标指上以后的变化是如何实现的

上一条：CSS的常用选择器下一条：css中的简单选择器、上下文选择器和伪类选择器的介绍和案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多