Loading

css子选择器 :frist-child :nth-child(n) :nth-of-type(n) ::select选择器

记录一下前一段时间使用、学习的几种选择器。

1.  :frist-child 选择器n

比如<ul><li></li>

    <li></li>

    <li></li></ul>

要选中第一个li,则使用 li:frist-child{},而不是ul:frist-child{},将会选中第一个li标签

如果ul下第一个元素不是 li, li:frist-child就失效了。突然感觉好鸡肋。。

2.  :nth-child(n)选择器

选择属于其父元素的第n个子元素,计数从1开始,而不是0。IE浏览器不支持。

n可以是数字,也可以是odd、even,也可以是数学算式

比如<ul>

    <p></p>

    <li></li>

    <li></li>

    <li></li></ul>

(1)要选中第一个li。使用   li:nth-child(2)  ,li: 只能匹配<li>元素,写成 li:nth-child(1)不能匹配到<p>元素,要匹配<p>则写为p:nth-child(1)

这里,网上教程表示:该选择器选取父元素的第 N 个子元素,与类型无关。经过实验,发现与类型有关,用的时候需要自己再验证一下。

(2)odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)

  选中下标是奇数的 li 元素:li:nth-child(odd)

(3)使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

 选中下标是 2 的倍数的所有 li 元素:li:nth-child(2n)

3.  :nth-of-type(n)选择器

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式

比如<ul>

    <p></p>

    <li></li>

    <li></li>

    <li></li></ul>

要选择第一个 li 元素,就是 li:nth-of-type(1),注意这里与:nth-child(n)选择器的区别

4.  ::select选择器

选中当前鼠标选中的元素

一般选中的文本是蓝色背景,可以用此改变为粉色!

posted @ 2020-05-05 21:29  sq800  阅读(205)  评论(0编辑  收藏  举报