下一个和上一个元素的CSS选择器

文森特1989

我如何分别定位列表元素,例如,我想进行以下操作:

HTML:

<ul class="roundabout-holder">
    <li class="roundabout-moveable-item"></li>
    <li class="roundabout-moveable-item"></li>
    <li class="roundabout-moveable-item roundabout-in-focus"></li>
    <li class="roundabout-moveable-item"></li>
    <li class="roundabout-moveable-item"></li>
    <li class="roundabout-moveable-item"></li>
</ul>

CSS:

.roundabout-in-focus{
font-size:1em;
}

.roundabout-in-focus.prev(),
.roundabout-in-focus.next(){
font-size:.9em;
} 


.roundabout-in-focus.prev().prev(),
.roundabout-in-focus.next().next(){
font-size:.8em;
}

.roundabout-in-focus.prev().prev().prev(),
.roundabout-in-focus.next().next().next(){
font-size:.7em;
}

这意味着焦点对准处越远,列表元素的字体大小越小。

时钟

每个下一个同级都可以用a表示+ .roundabout-moveable-item,但是先前的同级没有等效项

由于您需要对于指定为的元素设置下一个和上一个元素的样式.roundabout-in-focus,因此您将无法使用其他技术(例如)来完成此操作:not(.roundabout-in-focus)因此,您不能使用纯CSS做到这一点。

如果您使用的是jQuery(我根据示例中.prev().next()表示假设),则这应该相对容易实现。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在号码选择器中隐藏上一个和下一个号码?

来自分类Dev

css ~ 选择器不会将样式应用于所有目标元素(z-index 到下一个/上一个标签)

来自分类Dev

触发onclick的元素的下一个元素的CSS选择器?

来自分类Dev

日期范围选择器不显示下一个箭头,但显示上一个箭头

来自分类Dev

jQuery下一个兄弟姐妹选择器(“上一个〜兄弟姐妹”)

来自分类Dev

使用Bootstsrap Jquery在日期选择器中将下一个和上一个月替换为下一个和前一天

来自分类Dev

单击时通过下一个/上一个按钮选择元素

来自分类Dev

CSS 选择器 - 通过上一个元素文本选择元素

来自分类Dev

jQuery选择下一个和上一个img

来自分类Dev

选择字符串中的上一个和下一个单词

来自分类Dev

jQuery选择下一个和上一个img

来自分类Dev

自动选择html select标签的上一个和下一个选项

来自分类Dev

依靠上一个和下一个元素进行流处理

来自分类Dev

列表中的Python Compare元素与上一个和下一个

来自分类Dev

获取json数组的下一个和上一个元素

来自分类Dev

循环中的上一个和下一个元素

来自分类Dev

如何获取数组中的下一个和上一个元素,Ruby

来自分类Dev

使用下一个和上一个按钮循环遍历li元素

来自分类Dev

抓取数组中的上一个和下一个元素

来自分类Dev

循环中的上一个和下一个元素

来自分类Dev

获取与jQuery中的选择器匹配的下一个元素

来自分类Dev

jQuery .next()不使用选择器拾取下一个元素

来自分类Dev

选择下一个元素

来自分类Dev

datepicker CSS颜色的下一个和上一个

来自分类Dev

上一个和下一个的CSS

来自分类Dev

CSS 下一个和上一个剪辑路径动画

来自分类Dev

选择下一个元素CSS

来自分类Dev

如何在Bootstrap日期选择器中获取下个月而不是下一个上一个图标?

来自分类Dev

当我单击“下一个/上一个”按钮时,如何在jQuery UI日期选择器中制作月份变化的动画

Related 相关文章

  1. 1

    如何在号码选择器中隐藏上一个和下一个号码?

  2. 2

    css ~ 选择器不会将样式应用于所有目标元素(z-index 到下一个/上一个标签)

  3. 3

    触发onclick的元素的下一个元素的CSS选择器?

  4. 4

    日期范围选择器不显示下一个箭头,但显示上一个箭头

  5. 5

    jQuery下一个兄弟姐妹选择器(“上一个〜兄弟姐妹”)

  6. 6

    使用Bootstsrap Jquery在日期选择器中将下一个和上一个月替换为下一个和前一天

  7. 7

    单击时通过下一个/上一个按钮选择元素

  8. 8

    CSS 选择器 - 通过上一个元素文本选择元素

  9. 9

    jQuery选择下一个和上一个img

  10. 10

    选择字符串中的上一个和下一个单词

  11. 11

    jQuery选择下一个和上一个img

  12. 12

    自动选择html select标签的上一个和下一个选项

  13. 13

    依靠上一个和下一个元素进行流处理

  14. 14

    列表中的Python Compare元素与上一个和下一个

  15. 15

    获取json数组的下一个和上一个元素

  16. 16

    循环中的上一个和下一个元素

  17. 17

    如何获取数组中的下一个和上一个元素,Ruby

  18. 18

    使用下一个和上一个按钮循环遍历li元素

  19. 19

    抓取数组中的上一个和下一个元素

  20. 20

    循环中的上一个和下一个元素

  21. 21

    获取与jQuery中的选择器匹配的下一个元素

  22. 22

    jQuery .next()不使用选择器拾取下一个元素

  23. 23

    选择下一个元素

  24. 24

    datepicker CSS颜色的下一个和上一个

  25. 25

    上一个和下一个的CSS

  26. 26

    CSS 下一个和上一个剪辑路径动画

  27. 27

    选择下一个元素CSS

  28. 28

    如何在Bootstrap日期选择器中获取下个月而不是下一个上一个图标?

  29. 29

    当我单击“下一个/上一个”按钮时,如何在jQuery UI日期选择器中制作月份变化的动画

热门标签

归档