css3新增了许多伪类,但是IE8以及更低版本的IE浏览器不支持css3伪类,所以在使用时要是涉及到布局等意象全局的样式,应该多考虑一下。

1.elem:nth-child(n)

这个伪类选中父元素下的第n个子元素,并且这个子元素的标签名为elem,n可以接受具体的数值,也可以接受函数(如4n-1)。需要注意的是,n是从1开始计算,而不是0。

我们可以使用一个无序列表来测试:

<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

当n为具体的数值是选中第n个子元素,如:

#test li:nth-child(3){
background:#f00;
}

选中的是<li>3</li>:

当n为函数时,比如n的值为“3n+1”,就会选中第3*0+1=1,3*1+1=4……个元素,如:

#test li:nth-child(3n+1){
background:#f00;
}

选中的是如图的元素:

当函数中的n系数为负时,甚至可以达到选择前n个元素的效果,如:

#test li:nth-child(-n+3){
background:#f00;
}

选中的元素为:

当n为“odd”时,选中单数元素,当n为“even”时,选中双数元素,如:

#test li:nth-child(even){
background:#f00;
}

选中的元素为:

2.elem:nth-last-child

和nth-child伪类一样的思路,只是技术方式改为倒数计算,所以,我们可以选择后n个元素,如:

#test li:nth-last-child(-n+3){
background:#f00;
}

选中的元素为:

3.elem:last-child

不言而喻,选中最后一个子元素。

4.elem:only-child

要是elem是父元素下唯一的子元素,这选中之,测试html代码改为:

<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul class="test">
<li>我是唯一的哦~</li>
</ul>

css代码为:

.test li:only-child{
background:#f00;
}

则只会选中第二个列表,第一个列表没有元素被选中:

5.elem:nth-of-type(n)

选择父元素下第n个elem元素,n接受的格式和nth-child一样。甚至在绝大多数情况下,nth-of-type的效果甚至和nth-child没有区别,那这两个伪类到底是什么区别呢。注意:

elem:nth-of-type(n)是“选择父元素下第n个elem元素”。

而elem:nth-child(n)是“这个伪类选中父元素下的第n个子元素,并且这个子元素的标签名为elem”。

接下来创建一个demo演示一下这两者的区别:

比如有一下html代码,在ul中混入一个<p>元素:

<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
<p>强行插楼!!</p>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

如果css代码为:

.test li:nth-of-type(4){
background:#f00;
}

因为nth-of-type是“选择父元素下第n个elem元素”,所以,会选中<li>4</li>元素,效果为:

那如果代码是这样呢:

.test li:nth-child(4){
background:#f00;
}

因为:nth-child(n)选择的是“这个伪类选中父元素下的第n个子元素,并且这个子元素的标签名为elem”,在本例中,父元素的第4个子元素是<p></p>,但该元素的标签名并不是<li>,所以,这行代码相当于什么都没选中,也没没有效果了:

6.elem:first-of-type和elem:last-of-type

不言而喻,选中父元素下第1个/最后一个elem元素。

7.elem:only-of-type

如果父元素下的子元素只有一个elem元素,选中该元素。elem:only-of-type和elem:only-child不同的是,后者父元素下只能有一个子元素;而前者这不一定,只要父元素下只有一个elem标签就行。

比如有html代码:

<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
<p>强行插楼!!</p>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

有以下css代码:

.test p:only-of-type{
background:#f00;
}

则会选中其中唯一的一个p标签:

但假设html代码为:

<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
<p>强行插楼!!</p>
<p>再插一次!!</p>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

因为p元素不唯一,这不会选择任何元素。

8.elem:empty

选中不包含子元素和内容的elem标签。

css3之新增伪类的更多相关文章

  1. CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) ...

  2. css3学习之--伪类与圆角

    随着css3.0的发布到逐渐完善,目前已经大部分浏览器已经能较好地适配,所以写一些css3的学习经历,分享心得,主要以案例讲解为主,话不多说,今天以css3的新增的“圆角”属性来讲解,基于web画一个 ...

  3. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

  4. CSS3的一个伪类选择器:nth-child()

    CSS3的一个伪类选择器“:nth-child()”. Table表格奇偶数行定义样式: 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我 ...

  5. CSS3新增伪类--好用的:target

      问:如果让你实现下图,点击跳转后,让内容1增加一个背景颜色,你会怎么做呢? 可能很多小伙伴第一反应是用JS,给跳转绑定点击事件,然后用DOM获取到内容1,在给其添加css样式. 如果我跟你说用cs ...

  6. 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  7. CSS3中的伪类选择器详解

      类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...

  8. CSS3学习笔记——伪类hover

    最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示”    ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...

  9. css3中的伪类选择器

    一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...

随机推荐

  1. 在linux 系统下 使用命令行对mysql 数据库进行操作

    1.连接mysql root@test:/home# mysql -uroot -proot <uroot是用户名,proot是密码> 2.查询所有的库 mysql> show da ...

  2. uni-app tabBar 踩坑

    { "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "pa ...

  3. i 是一个修饰符 (搜索不区分大小写)

    什么是正则表达式? 正则表达式是由一个字符序列形成的搜索模式. 当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容. 正则表达式可以是一个简单的字符,或一个更复杂的模式. 正则表达式可用于所 ...

  4. windows怎么远程访问deepin linux桌面

    deepin linux端安装anydesk 1.首先点击打开任务栏上的“深度商店” 2.打开后搜索anydesk. 3.点击进入后按“安装”即可,安装完成即可在“深度商店”点击“打开”运行anyde ...

  5. PermissionUtils

    import android.annotation.TargetApi; import android.app.Activity; import android.content.Context; im ...

  6. C++统计程序运行时间代码片段

    因为经常需要统计代码的运行时间,所以计时功能就显得很重要, 记录一下现在喜欢用的计时方式,供日后查阅. 1.下面是计时主函数, bool TimeStaticMine(int id,const cha ...

  7. 分布式锁中的基于redis的setnx的原理以及set和setnx的区别是什么

    基于Redis实现分布式锁.虽然网上介绍的Redis分布式锁博客比较多,却有着各种各样的问题,本篇博客将详细介绍如何正确地使用setnx实现Redis分布式锁 这里就不介绍错误的示范了 大家直接看正确 ...

  8. sublime3配置php开发环境

    Sublime3 3143 1.用包管理器安装SublimeLinter ctrl+shift+p Package Control: install package SublimeLinter 注意: ...

  9. [JS] 文本框判断输入的内容是否为数字

    可以通过触发文本框的onchange事件来对输入的内容进行判断是否为数字 文本框的属性设置: 把onchange的属性对应的js函数写好即可 参数传输的是当前控件的value值,即text值 < ...

  10. python 并发编程 阻塞IO模型

    阻塞IO(blocking IO) 在linux中,默认情况下所有的socket都是blocking,一个典型的读操作流程大概是这样: 当用户进程调用了recvfrom这个系统调用,kernel内核就 ...