css如何分辨伪类和伪元素？

　　一.伪类（用于向某些选择器添加特殊的效果）

　　伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

　　伪类包含两种：状态伪类和结构性伪类。

　　状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括：

　　:link应用于未被访问过的链接；

　　:hover应用于鼠标悬停到的元素；

　　:active应用于被激活的元素；

　　:visited应用于被访问过的链接，与:link互斥。

　　:focus应用于拥有键盘输入焦点的元素。

　　结构性伪类是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。常见的包括：

　　:first-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选择的元素里面没有任何内容。

　　例：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　<style>

　　.demo{

　　width:200px;

　　height:500px;

　　margin:50pxauto;

　　text-align:center;

　　}

　　.tab_content{

　　height:50px;

　　background:red;

　　margin-bottom:10px;

　　}

　　#tab1:target,#tab2:target,#tab3:target{

　　background:blue;

　　line-height:50px;

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="demo">

　　<ulclass="tabs">

　　</ul>

　　<divid="tab1"class="tab_content">tab1</div>

　　<divid="tab2"class="tab_content">tab2</div>

　　<divid="tab3"class="tab_content">tab3</div>

　　</div>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55446.shtml