CSS3 选择器 伪类选择器介绍

2020-04-30 15:17:59易采站长站整理

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
这样一来就把页面中禁用的文本框应用了一个不同的样式。那么对于其他几个用法是一样的,这里就不在讲述。IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

三、CSS3的:nth选择器
这节内容才是关键,也是CSS3选择器最新部分,有人也称这种选择器为CSS3结构类,下面我们通过实际的应用来具体了解他们的使用和区别,首先列出他具有的选择方法:

:fist-child选择某个元素的第一个子元素;
:last-child选择某个元素的最后一个子元素;
:nth-child()选择某个元素的一个或多个特定的子元素;
:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
:nth-of-type()选择指定的元素;
:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
:first-of-type选择一个上级元素下的第一个同类子元素;
:last-of-type选择一个上级元素的最后一个同类子元素;
:only-child选择的元素是它的父元素的唯一一个了元素;
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
:empty选择的元素里面没有任何内容。
下面我们针对上面所列的各种选择器,一个一个来介绍:

1、:first-child

:first-child是用来选择某个元素的第一个子元素,比如我们这里的这个demo,你想让列表中的"1"具有与从不同的样式,我们就可以使用:first-child来实现:

.demo li:first-child {background: green; border: 1px dotted blue;}
在没有这个选择器出现之前,我们都需在要第一个li上加上一个不同的class名,比如说“first”,然后在给他应用不同的样式

.demo li.first {background: green; border: 1px dotted blue;}
其实这两种最终效果是一样的,只是后面这种,我们需要在html增加一个额外的class名,请看效果:

IE6不支持:first-child选择器。

2、:last-child

:last-child选择器与:first-child选择器的作用类似,不同的是":last-child"选择是的元素的最后一个子元素。比如说,我们需要单独给列表最后一项一个不同的样式,我们就可以使用这个选择器,如:

.demo li:last-child {background: green; border: 2px dotted blue;}
这个效果和以前在列表上的“last”的class是一样的

.demo li.last {background: green; border: 2px dotted blue;}
他们效显示的效果都是一致的,如图所示;

3、:nth-child()