登录  /  注册
博主信息
博文 94
粉丝 0
评论 0
访问量 111390
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【CSS】伪类之:结构伪类选择器 [:'冒号']【重点总结】
可乐随笔
原创
630人浏览过

结构伪类选择器:

  1. <!--例如:ul.list-->
  2. <ul class="list">
  3. <li class="li">item1</li>
  4. <li class="li">item1</li>
  5. <li class="li">item2</li>
  6. <li class="li">item3</li>
  7. <li class="li">item4</li>
  8. <li class="li">item5</li>
  9. <li class="li">item6</li>
  10. <li class="li">item7</li>
  11. <li class="li">item8</li>
  12. </ul>

作用:用来匹配子元素,给一个查询起点起点
例如:ul.list

匹配第1个,class 需要改HTML(不推荐!)

  1. .list > li.first{
  2. background: lightgreen;
  3. }

用伪类获取第n个: [nth-of-type(n)]

  1. /* 用伪类匹配第1个*/
  2. .list > li:nth-of-type(1){
  3. background: lightgreen;
  4. }
  5. /* 用伪类匹配第2个*/
  6. .list > li:nth-of-type(2){
  7. background: lightgreen;
  8. }

用伪类匹配第一个/最后一个: [first-of-type/last-of-type]

  1. /* 用伪类匹配第一个: [first-of-type] */
  2. .list > li:first-of-type{
  3. background: lightgreen;
  4. }
  5. /* 用伪类匹配最后一个: [last-of-type] */
  6. .list > li:last-of-type{
  7. background: lightgreen;
  8. }

伪类匹配参数用法:[一般理解:a为间隔行数,n为自然数,b为偏移量]

  1. ! :nth-of-type(an+b)
  2. * 1. a: 参数,[0,1,2,3,...]
  3. * 2. n: 参数,[0,1,2,3,...]
  4. * 3. b: 偏移量,[从0开始]
  5. /* 规则:计算出来的索引,必须是有效的(从1开始) */

匹配元素的两种场景: 1 匹配一个, 2 匹配一组

1. 匹配一个

  1. /* 1. 匹配第1个 */
  2. .list > li:nth-of-type(0n+1){
  3. background: lightgreen;
  4. }
  5. .list > li:nth-of-type(1){
  6. background: lightblue;
  7. }
  8. /* 2. 匹配第3个*/
  9. .list > li:nth-of-type(0n+1){
  10. background: lightgreen;
  11. }
  12. /*
  13. 1. 0*0 + 3 = 3
  14. 2. 0*1 + 3 = 3
  15. ...
  16. 所以可以简写 nth-of-type(3)
  17. */

2. 匹配一组

  1. /* 1. 全选 1n */
  2. .list > li:nth-of-type(1n+0){
  3. background: lightgreen;
  4. }
  5. /* 2. 全选 + 偏移量 1n + 3 :从第3个开始全选 */
  6. .list > li:nth-of-type(1n+3){
  7. background: lightgreen;
  8. }
  9. /* 计算结果
  10. * 1: 1 * 0 + 3 =3
  11. * 2: 1 * 1 + 3 =4
  12. * 3: 1 * 2 + 3 =5
  13. ...
  14. 以此类推,取完所有有效的索引
  15. */

3. 如何匹配前3个

  1. .list > li:nth-of-type(-n+3){
  2. background: lightgreen;
  3. }
  4. /* 计算结果
  5. * 1: -1 * 0 + 3 =3
  6. * 2: -1 * 1 + 3 =2
  7. * 3: -1 * 2 + 3 =1
  8. * 3: -1 * 2 + 3 =0 无效索引,结束
  9. 以此类推,取完所有有效的索引
  10. */

总结 -重点!!

  1. * a = 0: 匹配一个
  2. * a = 1: 匹配一组(正向相邻元素)
  3. * a = -1:匹配一组(反向相邻元素)
  4. * a > 1: 格行匹配(a为间隔行数)

匹配所有偶数/奇数索引的元素:常用写法-重点

1. 匹配所有偶数行元素

  1. .list > li:nth-of-type(n){
  2. background-color:transparent;
  3. }
  4. .list > li:nth-of-type(2n){
  5. background: -lightgreen;
  6. }

2. 匹配所有奇数行元素

  1. .list > li:nth-of-type(2n+1){
  2. background: -lightgreen;
  3. }

3.匹配所有奇数与偶数索引子元素的参数关键字

  1. /*
  2. 1. 偶数索引: even <==> 2n
  3. 2. 奇数索引: odd <==> 2n+1/2n-1
  4. */
  5. .list > li:nth-of-type(even){
  6. background: -lightgreen;
  7. }
  8. .list > li:nth-of-type(odd){
  9. background: -lightgreen;
  10. }

4. 表格的隔行变色

  1. .list > li:nth-of-type(odd):hover{
  2. background: -lightgreen;
  3. 手形光标
  4. cursor: pointer;
  5. 延迟0.5
  6. transition: 0.5s;
  7. }

匹配最后3个

  1. /* 将选择器 nth-of-type() 换成 nth-last-child() */
  2. .list > li:nth-last-child(-n+3){
  3. background: lightgreen;
  4. }

结构伪类选择器总结(基于类型)

  1. * 1. nth-of-type(an+b)
  2. * 2. nth-last-of-type(an+b)
  3. * 3. nth-last-child(an+b)
  4. * 4. first-of-type
  5. * 5. last-of-type
  6. 更多MDN,可以参考
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

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