侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

如果恰好有5个,则用CSS选择所有元素

2022-12-23 星期五 / 0 评论 / 0 点赞 / 30 阅读 / 1643 字

我希望所有5个孩子如果有5个孩子(如果有4个或6个孩子,请不要选择任何孩子.) 举例说明:http://jsfiddle.net/rudiedirkx/339H6/3/show/ 如果有1个非

... . . 我希望所有5个孩子如果有5个孩子(如果有4个或6个孩子,请不要选择任何孩子.)

举例说明:http://jsfiddle.net/rudiedirkx/339H6/3/show/

如果有1个非常简单,您可以选择所有元素:

:first-child:last-child

您可以选择前5个和后5个中的元素:

:nth-child(-n+5):nth-last-child(-n+5)

(演示中的红色)两者都没有做我想要的,但说明了一点:1个选择器,几个元素.

如果有5个选择器,您可以选择所有孩子:

li:nth-child(1):nth-last-child(5),li:nth-child(2):nth-last-child(4),li:nth-child(3):nth-last-child(3),li:nth-child(4):nth-last-child(2),li:nth-child(5):nth-last-child(1)

(小提琴中的黄色)但这太可怕了.当我决定我也喜欢4时,这是非常可怕的:如果有4个OR 5元素,那么选择它们.这将需要4个选择器.

有没有一个体面的方式来做到这一点,我错过了?我觉得:nth-​​child(-n 5):nth-​​last-child(-n 5)正在进行中,但选择的方式过于宽泛. (小提琴中的绿色.)

.

解决方法

. 在确定第一个孩子也是最后一个孩子之后,您可以使用普通兄弟组合子来选择其余元素:

li:first-child:nth-last-child(5),li:first-child:nth-last-child(5) ~ li

不幸的是,你仍然需要重复选择器至少一次,因为你需要一个匹配第一个孩子,然后另一个与兄弟组合子匹配其余的.但它绝对比重复它多四次.

. . .. ...

广告 广告

评论区