search

博客列表 >CSS中的选择器学习

CSS中的选择器学习

云猫
云猫原创
2020年04月24日 14:11:09624浏览

1、 简单选择器

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

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

  • 学习实例代码：

  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.       /* 类选择器  对应元素中的class；class选择器 */
  9.       .ul {
  10.         background-color: lightgrey;
  11.         font-size: 1.5rem;
  12.       }
  13.       .item {
  14.         background-color: lightblue;
  15.       }
  17.       /* 元素选择器 */
  18.       body {
  19.         background-color: lightgreen;
  20.       }
  21.       /* ID选择器 */
  22.       #five {
  23.         background-color: lightpink;
  24.       }
  25.       /* 多个类选择器 */
  26.       .item.center {
  27.         background-color: lightslategray;
  28.       }
  29.       /* 属性选择器 如果只有一个title属性，则可以不加后面的值="nine"*/
  30.       .item[title="nine"] {
  31.         background-color: lightskyblue;
  32.       }
  33.       /* 选择多个设置背景颜色 */
  34.       #two,
  35.       .item[title="three"],
  36.       .item.four {
  37.         background-color: mediumpurple;
  38.       }
  39.     </style>
  40.   </head>
  42.   <body>
  43.     <ul class="ul">
  44.       <li class="item center">1</li>
  45.       <li class="item" id="two">2</li>
  46.       <li class="item" title="three">3</li>
  47.       <li class="item four">4</li>
  48.       <li class="item" id="five">5</li>
  49.       <li class="item">6</li>
  50.       <li class="item">7</li>
  51.       <li class="item">8</li>
  52.       <li class="item" title="nine">9</li>
  53.     </ul>
  54.   </body>
  55. </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.     <style>
  8.       body {
  9.         background-color: mediumturquoise;
  10.       }
  12.       .uuul {
  13.         background-color: lightgray;
  14.         font-size: 1.5rem;
  15.       }
  17.       /* 后代选择器 */
  18.       .uuul li {
  19.         background-color: lightgoldenrodyellow;
  20.       }
  21.       /* 同级相邻选择器 */
  22.       .item[title="five"] + .item {
  23.         background-color: lightgreen;
  24.       }
  26.       /* 同级所有选择器 */
  27.       .item[title="five"] ~ .item {
  28.         background-color: lightgreen;
  29.       }
  31.       /* 父子选择器 */
  32.       body > ul {
  33.         border: 1px solid lightcoral;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <ul class="uuul">
  39.       <li class="item">1</li>
  40.       <li class="item">2</li>
  41.       <li class="item">3</li>
  42.       <li class="item">4</li>
  43.       <li class="item" title="five">5</li>
  44.       <li class="item">6</li>
  45.       <li class="item">7</li>
  46.       <li class="item">8</li>
  47.       <li class="item">9</li>
  48.     </ul>
  49.   </body>
  50. </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.     <style>
  8.       body {
  9.         background-color: mediumturquoise;
  10.       }
  12.       .uuul {
  13.         background-color: lightgray;
  14.         font-size: 1.5rem;
  15.       }
  16.       /* 选择第一个 */
  17.       .uuul > :first-child {
  18.         /* background-color: lightcyan; */
  19.       }
  20.       /* 选择最后一个 */
  21.       .uuul > :last-child {
  22.         /* background-color: lightgreen; */
  23.       }
  24.       /* 选择任何位置（指定位置） 正序*/
  25.       .uuul > :nth-child(5) {
  26.         /* background-color: lightpink; */
  27.       }
  28.       /* 选择任何位置（指定位置）倒序 */
  29.       .uuul > :nth-last-child(2) {
  30.         /* background-color: lightseagreen; */
  31.       }
  32.       /* 选择奇数偶数【奇数：odd或2n-1；偶数：2n或even】 */
  33.       /* n是从0开始的，2n指2*0=0   2*1=2  2*2=4  2*3=6 ...... */
  34.       .uuul > :nth-child(2n) {
  35.         /* background-color: lightskyblue; */
  36.       }
  37.       /* 将不分组匹配看作是一个循环，在循环内判断传入的值（n）等于当前循环位置时，改变当前位置的背景颜色 */
  38.       /* 案例：选择前三 */
  39.       /* 解析：  */
  40.       /* -0 + 3 = 3 开始循环*/
  41.       /* -1+3=2 */
  42.       /* -2+3=1 */
  43.       /* -3+3=0 临界点结束循环*/
  44.       .uuul > :nth-child(-n + 3) {
  45.         background-color: lime;
  46.       }
  47.       /* 案例：选择从5开始后面的所有item */
  48.       /* 解析 */
  49.       /* 0+5=5 开始循环 */
  50.       /* 1+5=6 */
  51.       /* 2+5=7 */
  52.       /* 3+5=8 */
  53.       /* 4+5=9  item只有9个；最大值,临界点结束*/
  55.       .uuul .item:nth-child(n + 5) {
  56.         background-color: magenta;
  57.       }
  58.     </style>
  59.   </head>
  60.   <body>
  61.     <ul class="uuul">
  62.       <li class="item">1</li>
  63.       <li class="item">2</li>
  64.       <li class="item">3</li>
  65.       <li class="item">4</li>
  66.       <li class="item" title="five">5</li>
  67.       <li class="item">6</li>
  68.       <li class="item">7</li>
  69.       <li class="item">8</li>
  70.       <li class="item">9</li>
  71.       <li class="item222">10</li>
  72.     </ul>
  73.   </body>
  74. </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”表示获取前面一组元素,正数表示从指定位置获取余下元素
  • 学习实例代码
  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.       body {
  9.         background-color: mediumturquoise;
  10.       }
  12.       .uuul {
  13.         background-color: lightgray;
  14.         font-size: 1.5rem;
  15.       }
  16.       /* 选择第一个 */
  17.       .uuul li:first-of-type {
  18.         background-color: maroon;
  19.       }
  20.       /* 选择最后一个 */
  21.       .uuul li:last-of-type {
  22.         background-color: mediumaquamarine;
  23.       }
  24.       /* 选择指定位置 */
  25.       .uuul li:nth-of-type(2) {
  26.         background-color: mediumorchid;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <ul class="uuul">
  32.       <li class="item">1</li>
  33.       <li class="item">2</li>
  34.       <li class="item">3</li>
  36.       <div class="item">4</div>
  37.       <div class="item">5</div>
  38.       <div class="item">6</div>
  39.     </ul>
  40.   </body>
  41. </html>

3.3 其它伪类

序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时，向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :not() 排除与选择器参数匹配的元素

总结

  • 伪类选择器是最重要的部分，我把他当做一个循环，在循环内判断传入的值（n）等于当前循环位置时，可以改变当前位置的背景颜色或者处理其他
  • 简单选择器中类选择器 class 和 id 选择器是最常用的
上一条：tp5生成二维码下一条：include block load 简化模板和引入外部资源
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多