转自脚本之家：http://www.jb51.net/css/213779.html

无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。

伪类选择器：CSS中已经定义好的选择器,不能随便取名

常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器。

CSS中有如下四种伪元素选择器：
· first-line:为某个元素的第一行文字使用样式；
· first-letter:为某个元素中的文字的首字母或第一个字使用样式；
· before:在某个元素之前插入一些内容；
· after: 在某个元素之后插入一些内容；
   使用方法：选择器：伪元素{样式}

结构性伪类选择器
 1.  四个最基本的：root、not、empty、target

2. first-child、last-child、nth-child、nth-last-child、               
nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)

3.  nth-of-type、nth-last-of-type    
 4. 循环使用样式  
 5. only-child

:root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。“:root”选择器等同于<html>元素

:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用

“:first-child()”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素。

看下面一个例子：

 <style type="text/css">

 div p:nth-last-child(2){

 color:red;

 }

 </style>

 </head>

 <body>

 <div>

 <p>前端</p>

 <p>开发</p>

 <p>工程</p>

 <p>软件</p>

 <p>工程</p>

 </div>

 </body>

:nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：
        :nth-child(length);/*参数是具体数字*/
        :nth-child(n);/*参数是n,n从0开始计算*/
        :nth-child(n*length)/*n的倍数选择，n从0开始算*/
        :nth-child(n+length);/*选择大于length后面的元素*/
        :nth-child(-n+length)/*选择小于length前面的元素*/
        :nth-child(n*length+1);/*表示隔几选一*/
        //上面length为整数

值得注意的是：nth-child(0)没有选择元素，nth-child(1)选择第一个元素。

 <style type="text/css">

 *{list-style:none;};

 .demo {

 width: 400px;

 padding: 10px;

 }

 .demo li {

 padding: 5px;

 float: left;

 margin-right:4px;

 }

 .demo li a {

 float: left;

 display: block;

 height: 20px;

 line-height: 20px;

 width: 20px;

 -moz-border-radius: 10px;

 -webkit-border-radius: 10px;

 border-radius: 10px;

 text-align: center;

 background: #f36;

 color: white;

 text-decoration: none;

 }

 .demo li:nth-child(1){

 background:#01FEFE;

 }

 .demo li:nth-child(2n){

 background:#4679BD;

 }</p> <p> </style>

 </head>

 <body>

 <div class="demo">

 <ul>

 <li class="one" id="first"><a href="">1</a></li>

 <li class="two"><a href="">2</a></li>

 <li class="three"><a href="">3</a></li>

 <li class="four"><a href="">4</a></li>

 <li class="five"><a href="">5</a></li>

 <li class="six"><a href="">6</a></li>

 <li class="seven"><a href="">7</a></li>

 <li class="eight"><a href="">8</a></li>

 <li class="nine"><a href="">9</a></li>

 <li class="ten" id="last"><a href="">10</a></li>

 </ul>

 </div>

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。

":only-child"表示的是一个元素是它的父元素的唯一一个子元素。

伪元素：
 CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;
 那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个
p::first-line {font-weight:bold;}

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动，

 .clearfix:before,

 .clearfix:after {

 content: ".";

 display: block;

 height: 0;

 visibility: hidden;

 }

 .clearfix:after {clear: both;}

 .clearfix {zoom: 1;}

::selection用来改变浏览网页选中文的默认效果

css3 伪元素和伪类选择器详解的更多相关文章

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

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

  2. CSS3 结构伪类选择器 详解

    1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...

  3. css伪元素:before和:after用法详解

    css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面 ...

  4. jQuery九类选择器详解

    (1)基本选择器 <body> <div id="div1ID">div1</div> <div id="div2ID" ...

  5. web前端学习（三）css学习笔记部分（4）-- CSS选择器详解

    4.  元素选择器详解 4.1  元素选择器 4.2  选择器分组 用英文逗号","相连,使用相同的样式表 使用通配符对所有元素进行通用设定. 4.3  类选择器详解 4.3.1. ...

  6. CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  7. CSS的伪元素和伪类

    css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-l ...

  8. CSS伪元素与伪类的区别

    伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...

  9. CSS3 基础(1)——选择器详解

    CSS3选择器详解 一. 属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 选择器 示例 描述 ...

随机推荐

  1. 代码 | 自适应大邻域搜索系列之(4) - Solution定义和管理的代码实现解析

    前言 上一篇讲解了destroy和repair方法的具体实现代码,好多读者都在喊酸爽和得劲儿--今天这篇就讲点简单的,关于solution的定义和管理的代码实现,让大家回回神吧--哈哈. 01 总体概 ...

  2. 创建一个简单的maven的web程序

    最近学习Hadoop,发现学习要想用hadoop作为后台运行web程序,必须应用maven,所以学习了今天学习了一下maven,然后搭建了一个简单的web程序 首先我使用的是eclipse中自带的ma ...

  3. leetcode-268-Missing Number（异或）

    题目描述: Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is ...

  4. CentOS 7 分区方案

    通常系统盘都会选择性能较好SSD,一般在500G左右,这里就以500G硬盘为例,以下为CentOS 自动分区方案: 分区应该按照实际服务器用途而定,自动分区方案将 /home 空间分配太多了,多数情况 ...

  5. panda的query过滤

    pandas中可以用query函数以类SQL语言执行查询.

  6. rbac表设计

  7. Mono for Android - LocationServices not working

    Hi,I have the following code in my location activity.(this code was copied from Xamarin's Location S ...

  8. 【Kafka源码】Kafka代码模块

    Kafka源码依赖于Scala环境,首先需要安装scala,这块请自行百度进行安装. 传送门 当然,我们要分析源码,需要下载源码,请自行从github上面下载. 说明:本文使用的kafka版本为0.1 ...

  9. 【Maven学习】maven-enforcer-plugin的使用

    我们会经常碰到这样的问题,在pom中引入了一个jar,里面默认依赖了其他的jar包.jar包一多的时候,我们很难确认哪些jar是我们需要的,哪些jar是冲突的.此时会出现很多莫名其妙的问题,什么类找不 ...

  10. HTML 权重标签的使用

    <H>标签通常使用<H1><H2><H3>这3个标签是有权重加分的,<H4>用于无用途的文字标记等 非重要相关字. <H1>有别 ...