CSS选择器之伪类选择器（元素）

2024-02-21 23:23:22

CSS选择器之伪类选择器（元素）

:first-child 选择某个元素的第一个子元素（IE6不支持）

:last-child 选择某个元素的最后一个子元素

:first-of-type [CSS3]选择一个上级元素下的第一个同类子元素

:last-of-type [CSS3]选择一个上级元素的最后一个同类子元素

:only-child [CSS3]如果某个元素是父元素中唯一的子元素，那将会被匹配（IE6-8不支持）

:only-of-type [CSS3] 如果某个元素是父元素中唯一的子元素，那将会被匹配选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）

:nth-child() [CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）

:nth-last-child() [CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）

:nth-of-type() [CSS3]选择指定的元素（IE6-8不支持）

:nth-last-of-type() [CSS3]选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）

first、last和only伪类选择器

<body>

<p>（$1）这个段落是其父元素（body）的首个子元素。</p>

<h1>欢迎访问csdn的博客</h1>

<p>（$2）这个段落不是其父元素的首个子元素，也不是其父元素的最后一个子元素。</p>

<div>

<p>（$3）这个段落是其父元素（div）的首个子元素。</p>

<p>（$4）这个段落是其父元素（div）的最后一个子元素。</p>

</div>

<nav>

<ul>（$4）这个是ul元素，是父元素（nav）的首个子元素。。</ul>

<p>（$5）这个段落是其父元素（nav）的段落子元素中的首个子元素。</p>

<p>（$6）这个段落是其父元素（nav）的段落子元素中的最后一个子元素。</p>

<ul>（$7）这个是ul元素，是父元素（nav）的最后一个子元素。。</ul>

</nav>

<div>

<p>（$8）这个段落是其父元素（div）的唯一一个子元素。</p>

</div>

<nav>

<span>这个span也是父元素（nav）的一个子元素</span>

<p>（$9）这个段落不是其父元素（nav）的唯一一个子元素。</p>

</nav>

<p>（$10）这个段落是其父元素（body）的最后一个子元素。</p>

</body>

p:first-child { background:red; } 原理：首先p会筛选出页面所有的<p>标签，:first-child再从这些<p>标签中选中是其父元素的首个子元素的<p>标签，应用{ background:red; }这个样式。对于上面的例子，则会给$1、$3和$8添加红色的背景色。

p:last-child { background:yellow; } 流程是一样的，对于上面的例子则会给$4、$8、$9和$10添加黄色的背景色。

p:first-of-type { background:red; } 与:first-child比较，除了在$1、$3和$8添加红色的背景色外，$5和$9也将会被添加红色的背景色。原理：首先p会筛选出页面所有的<p>标签，:first-of-type再从这些<p>标签中选中排在第一位的<p>标签。通俗的讲，:first-of-type很强势，只要某个标签（比如div标签）内含有<p>标签，它不管怎么样都会选择一个，选择的这个<p>标签是div标签中第一个出现的。

p:last-of-type { background:yellow; } 流程是一样的，对于上面的例子则会给$4、$6、$8、$9和$10添加黄色的背景色。

p:only-child { background:red; } 原理：首先p会筛选出页面所有的<p>标签，然后一一确认这些<p>标签哪些没有任何的兄弟元素。对于上面的例子$8是没有任何的兄弟的元素的，因此会被添加红色的背景色。

p:only-of-type { background:red; } 与:only-child比较，除了$8以外，$9也会被添加红色的背景色。原理就不做讲解了，参照:first-of-type。

nth伪类选择器

<!DOCTYPE html>

<style>

p { width:50px;float:left;text-align:center;border:1px solid gray; }

</style>

</head>

<body>

<h1>CSDN博客</h1>

</body></html>

先看看伪类添加之后，会产生什么样的效果。比如下述nth伪类：

p:nth-child(odd) { background:red; } 加入之后效果如下图所示（odd是奇数的意思）：

有意思的事情发生了，为什么不是奇数的段落背景色为红色呢？先放下这个问题，再来看看下面这个伪类：p:nth-of-type(odd) { background:red; }，显示效果如下图所示：

原理（上例）：nth-child是计算body中所有的子元素（包括h1），然后按照奇偶进行排列，那么“第一个”p标签的顺序标号成为了“2”。而nth-of-type则不同，它是计算body中所有的标签为p的子元素，其他的子元素它不管，然后按照奇偶进行排列。

至于:nth-last-child()和:nth-last-of-type()原理也是一样的，不过它计算的方式，是倒序的。关于这两个伪类就不多展开了。

虽然不展开:nth-last-child()和:nth-last-of-type()，但是nth-child还有东西需要展示一下，比如这个伪类p:nth-child(2n+1) { background:red; }，显示效果与p:nth-child(odd) { background:red; }是一模一样的，这里就不贴图了。

其中需要说的是这个n，写成2i+1，行不行？不行！浏览器认不出来，浏览器只认识n。当然这是规则，就不深究了，下面要继续讨论的是，它只能进行奇偶选择吗？再来看看这个伪类：

p:nth-child(3n+1) { background:red; } 渲染的结果如下图所示：