资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何使用css3伪类选择器

如何使用css3 伪类选择器?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的贵池网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

first-child & last-child

这两个选择器会匹配一组兄弟元素中的第一个:
 

如何使用css3 伪类选择器

注意: 要想使得该选择器起作用实际上需要满足三个条件:

  • 被前面的选择器匹配 此例中是 p

  • 是一组兄弟元素

  • 是第一个(或者最后一个)元素

last-child 在此不多赘述, 区别就是从后向前进行匹配.

如何使用css3 伪类选择器

first-of-type & last-of-type

这两个选择器会匹配同一组类型中的第一个(最后一个)而不理会该元素的位置是否真的是在该组元素的第一个(最后一个):
 

如何使用css3 伪类选择器

注意: 要想使得该选择器起作用实际上需要满足两个条件:

  • 被前面的选择器匹配 此例中是 p

  • 是一组兄弟元素

last-of-type 在此不多赘述, 区别就是从后向前进行匹配.

如何使用css3 伪类选择器

only-child & only-of-type

only-child 匹配那些没有兄弟元素的元素, 换句话说匹配那些 "孤儿" 元素:
 

如何使用css3 伪类选择器

上图中被 "孤立" 的元素有第一个

和嵌套的 它们都被选择器匹配到了.

only-of-type 匹配一组兄弟元素中类型唯一类型的元素:
 

如何使用css3 伪类选择器

因为第一个

和第二个

以及最后的 在对应的父元素下类型都是唯一的所以它们会被选择器匹配到.

nth-child & nth-last-child

这些伪类选择器最有意思的一点就是可以传入一个公式 an+b, 根据这个公式来匹配元素. 这个公式有很多玩法, 导致有很多人将这个公式的所有组合以及所匹配的内容背下来.

实际上我们的思考方式被 css 给固化了, 因为这个东西从数学的角度来看非常容易摸清楚规律, 例如有如下的代码:



  

第一行

  

第二行

  

第三行

思考模式:

  1. 先收集匹配到的元素, 在这个例子中就是三个

    标签

  2. 从下标 0 后数到 2 表示

    的个数, 依次带入公式求值

  3. 将对应下标的元素进行匹配(元素下标从1开始数)

结果:
 

如何使用css3 伪类选择器

 
公式解释
2n所有偶数元素
2n+1所有奇数元素
n & n+1所有元素
n+2第二个元素后的元素(包括第二个元素)
n+3第三个元素后的元素(包括第三个元素)
0n啥都匹配不到
3n+44,7,10,13 ....
1只匹配第一个元素
-n+2只匹配前两个元素
nth-child(odd)奇数元素
nth-child(even)偶数元素

如何使用css3 伪类选择器

不过不要忘记了 nth-child 匹配的依然是同一组兄弟元素, 不过有趣的是 nth-child 会利用选择器进行过滤, 但是应用样式的时候却不把样式应用到匹配的元素上:
 

如何使用css3 伪类选择器

上图中

中的两组

元素被视为兄弟元素进行匹配, 但是有趣的是作为第三个

元素 "第三行" 也被匹配到了, 这说明在应用样式会直接应用在一组兄弟元素中而不是被匹配到的

元素, 不过需要注意的是如果图片中的 "第三组" 中的

的话类型不同样式是不会被应用的.

nth-last-child 就是从后向前的版本, 这里就不在详细举例了:
 

如何使用css3 伪类选择器

MDN 上还给出了一个有意思的例子, 可以根据元素的数量来控制元素的样式:

li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
  color: red;
}
A list of four items (styled):
      
  1. One
  2.   
  3. Two
  4.   
  5. Three
  6.   
  7. Four
A list of two items (unstyled):
      
  1. One
  2.   
  3. Two

nth-of-type & nth-last-of-type

nth-of-type 匹配:

  • 同一组中相同类型的兄弟元素

  • 匹配对应公式计算值的元素

如何使用css3 伪类选择器

你注意到了吗 nth-of-typenth-child 是有些区别的, 计算完成后样式的应用到了被匹配的元素身上, 而不是兄弟元素上.

nth-last-of-type 是一个从后向前的版本, 这里不在详细介绍:
 

如何使用css3 伪类选择器

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


文章标题:如何使用css3伪类选择器
URL链接:http://cdkjz.cn/article/gdjjeg.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220