• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > css的伪类选择器,为什么会有一个伪字?

    css的伪类选择器,为什么会有一个伪字?

    作者: 分类:HTML5与CSS3.0 点击: 489 次
    wordpress CMS主题:ssmay主题

      今年自学了很多关于UI类的内容,在审美上又有了一些提高,以后做的案例更美美哒!

      一、CSS3新增伪类选择器

      在CSS1版本的时候,几乎都是:hover的天下,在CSS2版本的时候,增加了:focus这个常用的,CSS3版本就增加了:nth-child这种必杀技了。

      在这里就只介绍CSS2和CSS3新增的伪类选择器。

      选择符 实例 描述 版本
      E:focus input[type='text']:focus 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。 CSS2
      E:first-child li:first-child 匹配父元素的第一个子元素E CSS2
      E:last-child li:last-child 匹配父元素的最后一个子元素E CSS3
      E:only-child li:only-child 匹配父元素仅有的一个子元素E CSS3
      E:nth-child(n) li:nth-child(2n) 匹配父元素的第n个子元素E。 CSS3
      E:nth-last-child(n) li:nth-last-child(2) 匹配父元素的倒数第n个子元素E CSS3
      E:first-of-type #content p:first-of-type 匹配同类型中的第一个同级兄弟元素E CSS3
      E:last-of-type #content p:last-of-type 匹配同类型中的最后一个同级兄弟元素E CSS3
      E:nth-of-type(n) #content p:nth-of-type(2n+1) 匹配同类型中的第n个同级兄弟元素E CSS3
      E:only-of-type #content p:only-of-type 匹配同类型中的唯一同级兄弟元素E CSS3
      E:nth-last-of-type(n) #content p:nth-last-of-type(5) 匹配同类型中的第n个同级兄弟元素E,但是从最后一个子元素开始计数 CSS3
      E:empty td:empty 匹配没有任何子元素(包括text节点)的元素E CSS3
      E:checked input[type='checkbox']:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) CSS3
      E:enabled input[type='button']:enabled 匹配用户界面上处于可用状态的元素E CSS3
      E:disabled input[type='button']:disabled 匹配用户界面上处于禁用状态的元素E CSS3
      E:target #list:target 匹配相关URL指向的E元素,超链接的URL地址和锚点一样。比如<a href="#list">点击</a> <div id="list"></div> CSS3
      :not(s) :not(h1) 选择非s元素的每个元素 CSS3

      还有好些不常用到的,我就不列举了,貌似伪类选择器是最多家庭成员的一种选择器了。

      二、为什么叫伪类?

      提到“伪”字,你想到了什么?“假的”,“汪精卫伪政府”,“不存在的”······

      我的理解就是:本身不存在,只有在特定的情况下才会被触发的状态,可以用css去修饰这个状态下的对象。

      这些伪类有不同的用处,有些是关于状态的,比如:hover:focus,有些是关于结构位置的,比如:nth-child(n),有些是关于UI样式的,比如:checked等。

      下面通过一些小案例来解释常用的伪类选择器。

      三、案例部分

      1、:focus 当对象获得光标的时候,经常用在表单上,比如当光标在搜索表单里时,让单行文本框变化边框颜色和长度。

      2、nth-child(n)相关的子元素位置选择器。比如li:nth-child(2),选择的是第二个li,这个前提条件是li必须是某个父元素下的子元素,而且必须处于父元素下面的第二个位置。当然ul li是一种结构体,ul下面只能是li的子元素,所以这样写不会有问题。

      :nth-child(n)这里的n是一个表达式。

      2.1 2n表示选择偶数,可以用even代替。比如:nth-child(2n):nth-child(even)

      2n+1表示奇数,可以用odd表示,比如:nth-child(2n+1):nth-child(odd)

      比如做一个斑马条纹的表格。

      2.2 通过:nth-child(n+length),可以选择length个长度以后的对象。

      比如:nth-child(n+5)表示选择第5个(包含5)以后的对象,n从0开始,这里必须是n+5的表达式,换成5+n都不行的。

      :nth-child(-n+length),可以选择length个长度以前的对象。这里的表达式必须是-n+length,不能调换顺序。

      比如:nth-child(-n+3),可以选择第3个(包含3)以前的对象。

      :nth-last-child(n)表示倒数,n的表达式和:nth-child(n)的表达式一样的。

      比如选择倒数从第五个开始和选择倒数三个。

      2.3 通过:nth-child(αn+β)这种表达式可以设置一组一组的元素样式。α表示多少个对象为一组,β表示这一组的第几个元素。

      比如:nth-child(5n+1),表示五个为一组,一组内的第一个元素。

      比如多彩标签案例。

      3、关于:nth-of-type(n)是为了弥补:nth-child(n)的不足的。

      比如p:nth-child(3)选择第三个段落,但是也许p的父元素下面还有h标题的子元素,那么第三个元素可能就不是p,而是标题。这时候用:nth-child(n)就选不到了,只能用同类型子元素选择器:nth-of-type(n)了。

      4、关于UI类的伪类选择器

      :enabled:disabled:checked等基本都用于表单对象。

      比如前段时间沸沸扬扬的支付宝年度账单,就因为默认勾选了同意数据引用协议,被一个律师狠狠的diss了一把。

      所以我们可以设计为没有勾选协议的时候按钮不可用,勾选了之后按钮可用。

      5、:target选择器

      这个选择器和锚点感觉有点像,就是指哪儿打哪儿。

      6、:not()选择器

      这个选择器就是筛选对象的,把不需要的对象筛出去。:not() 这个()里面的必须是一个能选择对象的选择器。

      比如选择input控件,把密码类型的筛出去不要。input:not([type='password'])

      比如选择所有的li,把最后的一个li筛出去不要。li:not(:last-child)

      写了两天才弄完,用codepen的好处就是可以直接查看效果,还可以手动实验,很棒,不知道童鞋们是否习惯呢?喜欢记得点赞或留言。



      QQ二维码

    文章作者:zhangxuan
    本文地址:http://wanlimm.com/77201808276705.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.