什么是伪类？

 

　　一个伪类是我们可以为了增加CSS选择一个关键字定义一个特殊状态的属于HTML元素。我们可以使用冒号语法将伪类添加到CSS选择器，:如下所示：a:hover{...}

 

　　一个CSS类是我们可以添加到HTML我们想申请，同一款式的规则元素，例如顶部菜单项或侧边栏小工具的标题属性。换句话说，我们可以使用CSS类对以某种方式相似的HTML元素进行分组或分类。

 

　　伪类与它们类似，因为它们也用于将样式规则添加到共享相同特征的元素。

 

　　但是，虽然真正的类是用户定义的并且可以在源代码中被发现，但是例如，基于所属的HTML元素的当前状态，UA（用户代理）（例如web浏览器）添加<divclass="myClass">伪类。

 

　　伪类和伪元素可以在CSS选择器中使用，但在HTML源代码中不存在。相反，它们在某些条件下由UA“插入”以用于在样式表中寻址。

 

　　伪类的目的

 

　　常规CSS类的工作是对元素进行分类或分组。开发人员知道他们的元素是如何分组的：他们可以形成类似“菜单项”，“按钮”，“缩略图”等的类来分组，以及后来的类似元素的样式。这些分类基于开发人员自己给出的元素特征。

 

　　例如，如果开发者决定使用a<div>作为缩略图对象，则可以使用<div>“缩略图”类对其进行分类。

 

　　<divclass="thumbnail">[...]</div>

 

　　然而，HTML元素具有基于其状态，位置，性质以及与页面和用户的交互的共同特征。这些是HTML代码中通常不标记的特征，但我们可以使用CSS中的伪类来定位它们，例如：

 

　　1、一个元素，它是其父元素中的最后一个子元素

 

　　2、访问的链接

 

　　3、一个全屏的元素。

 

　　这些是伪类通常所针对的特征。为了更好地理解类和伪类之间的区别，我们假设我们使用该类.last来标识不同父容器中的最后一个元素。

 

　　<ul>

 

　　<li>item1</li>

 

　　<li>item2</li>

 

　　<li>item3</li>

 

　　<liclass="last">item4</li>

 

　　</ul>

 

　　<select>

 

　　<option>option1</option>

 

　　<option>option2</option>

 

　　<option>option3</option>

 

　　<optionclass="last">option4</option>

 

　　</select>

 

　　我们可以使用以下CSS设置这些最后一个子元素的样式：

 

　　li.last{

 

　　text-transform:uppercase;

 

　　}

 

　　option.last{

 

　　font-style:italic;

 

　　}

 

　　但是当最后一个元素改变时会发生什么？好吧，我们必须将.last类从前一个元素移动到当前元素。

 

　　更新类的麻烦可以留给用户代理，至少对于元素中常见的那些特征（并且最后一个元素是它可以获得的常见元素）。拥有预定义的:last-child伪类确实非常有用。这样，我们不必指示HTML代码中的最后一个元素，但我们仍然可以使用以下CSS来设置它们的样式：

 

　　li:last-child{

 

　　text-transform:uppercase;

 

　　}

 

　　option:last-child{

 

　　font-style:italic;

 

　　}

 

　　伪类的主要类型

 

　　伪类有很多种，它们都为我们提供了基于其特征无法访问或难以访问的特征来定位元素的方法。这是MDN中标准伪类的列表。

 

　　1.动态伪类

 

　　动态伪类根据它们为响应用户的交互而转换的状态动态地添加到HTML元素和从HTML元素中删除。一些的动态伪类的例子是，，，和，所有这些都可以被添加到锚定标记。:hover:focus:link:visited<a>

 

　　a:visited{

 

　　color:#8D20AE;

 

　　}

 

　　.button:hover,

 

　　.button:focus{

 

　　font-weight:bold;

 

　　}

 

　　2.基于状态的伪类

 

　　基于状态的伪类在处于特定静态时添加到元素中。其中一些最着名的例子是：

 

　　:checked可以应用于复选框（<inputtype="checkbox">）

 

　　:fullscreen定位当前以全屏模式显示的任何元素

 

　　:disabledHTML元素，可以是在已禁用模式，例如<input>，<select>，和<button>。

 

　　最流行的基于状态的伪类必须是:checked，它标记是否选中了复选框。

 

　　.checkbox:checked+label{

 

　　font-style:italic;

 

　　}

 

　　input:disabled{

 

　　background-color:#EEEEEE;

 

　　}

 

　　3.结构伪类

 

　　结构伪类根据它们在文档结构中的位置对元素进行分类。它最常见的例子是:first-child，:last-child和:nth-child(n)-都可以用来根据容器的位置来定位容器内的特定子元素-并且:root它以DOM中最高级别的父元素为目标。

 

　　4.杂项伪类

 

　　还有一些难以分类的杂项伪类，例如：

 

　　:not(x)选择与选择器x不匹配的元素

 

　　:lang(language-code)选择哪些内容采用特定语言的元素

 

　　:dir(directionality)选择具有给定方向性内容的元素（从左到右或从右到左）。

 

　　p:lang(ko){

 

　　background-color:#FFFF00;

 

　　}

 

　　:root{

 

　　background-color:#FAEBD7;

 

　　}

 

　　nth-child与类型Pseudo-Classes的第n个

 

　　其中一件关于伪类最难的事情是可能理解的差别:nth-child和:nth-of-type伪类。

 

　　两者都是结构伪类，并在父元素（容器）内标记特定元素，但方式不同。

 

　　假设Ñ为2，然后:nth-of-child(n)靶向是一个元素它的父元素的第二个孩子，以及:nth-of-type(n)目标第二的中相同类型的元件的（例如段落）父元素内。

 

　　我们来看一个例子吧。

 

　　/*aparagraphthat'salsothesecondchildinsideitsparentelement*/

 

　　p:nth-child(2){

 

　　color:#1E90FF;//lightblue

 

　　}

 

　　/*thesecondparagraphinsideaparentelement*/

 

　　p:nth-of-type(2){

 

　　font-weight:bold;

 

　　}

 

　　让我们看看这个简短的CSS样式如何在两种不同的情况下使用HTML。

 

　　案例1

 

　　在案例1中，a中的第二个元素<div>是无序列表，因此nth-child(2)规则不适用于它。虽然它是第二个子元素，但它不是一个段落。

 

　　但是，如果父元素确实具有第二个段落，则该nth-of-type(2)规则将适用，因为此规则仅查找<p>元素，而不关心父元素内的其他类型的元素（例如无序列表）。

 

　　在我们的示例中，nth-of-type(2)规则将设置第二个段落，即子3。

 

　　<!--Case1-->

 

　　<div>

 

　　<p>Paragraph1,Child1</p>

 

　　<ul>UnorderedList1,Child2</ul>

 

　　<p>Paragraph2,Child3</p>

 

　　</div>






本文转载自中文网