伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

a:link|a:visited|a:hover|a:active

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

由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

:focus

/* 伪类将应用于拥有键盘输入焦点的元素。 */

:first-child

/* 伪类将应用于元素在页面中第一次出现的时候。 */

:lang

/* 伪类将应用于元素带有指定lang的情况。 */

伪元素选择器，伪元素的效果是需要通过添加一个实际的元素才能达到的。

/* 为某个元素的第一行文字使用样式。 */

:first-line

/* 为某个元素中的文字的首字母或第一个字使用样式。 */

:first-letter

/* 在某个元素之前插入一些内容。 */

:before

/* 在某个元素之后插入一些内容。 */

:after

结构性伪类选择器

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

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

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

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

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

:nth-child()选择某个元素的一个或多个特定的子元素。

<!DOCTYPE html>

<html>

    <head></head>

    <style type="text/css">

        div p:nth-child(n){

            color:red;

        }

        div p:nth-child(2n){

            color:yellow;

        }

    </style>

    <body>

        <div>

            <p>111</p>

            <p>222</p>

            <p>333</p>

            <p>444</p>

            <p>555</p>

        </div>

    </body>

</html>

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

<!DOCTYPE html>

<html>

    <head></head>

    <style type="text/css">

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

            color:red;

        }

    </style>

    <body>

        <div>

            <p>111</p>

            <p>222</p>

            <p>333</p>

            <p>444</p>

            <p>555</p>

        </div>

    </body>

</html>

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

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

CSS3中的伪元素

CSS3对伪元素进行了一定的调整，在以前的基础上增加了一个:
也就是现在变成了::first-letter,::first-line,::before,::after
另外还增加了一个::selection

在css3中，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

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

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

<!DOCTYPE html>

<html>

    <head></head>

    <style type="text/css">

        .test:before{

            content:"Hello";

        }

        .test.after{

            clear:both;

        }

    </style>

    <body>

        <div class="test"></div>

    </body>

</html>

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

UI状态元素伪类选择器

E:checked{attribute} 匹配所有用户界面（form表单）中处于选中状态的元素
E:enabled{attribute} 匹配所有用户界面（form表单）中处于可用状态的元素
E:disabled{attribute} 匹配所有用户界面（form表单）中处于不可用状态的元素
E::selection{attribute} 匹配元素中被用户选中或处于高亮状态的部分

目标伪类

E:target{attribute}   匹配相关URL指向的元素

CSS3之伪元素选择器和伪类选择器的更多相关文章

  1. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. 基础知识--:before伪元素和:after伪元素

    http://book.51cto.com/art/201108/285688.htm 3.7  替换指定位置 大家都知道before和after是前.后的意思.但是奇怪的是,CSS中的:before ...

  3. css 类选择器结合元素选择器和多类选择器

    1.结合元素选择器 <p class="important">css</p> p.important {color: red} 匹配class属性包含imp ...

  4. CSS一个元素同时使用多个类选择器（class selector）

    CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div ...

  5. CSS之后代选择器与多类选择器

    <新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子 ...

  6. css样式（二）（伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器 ）

    一.rgb值: RGBA 颜色 RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox +.Chrome.Safari 以及 Opera +. RGBA 颜色值是 RGB 颜色值的扩展,带有一 ...

  7. CSS伪元素:before/CSS伪元素:before/:after content 显示Font Awesome字体图标:after content 显示Font Awesome字体图标

    HTML <a href="javascript:volid(0);"><i class="icon-table"></i> ...

  8. jQuery的标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')

    $()可以是$(expresion),即css选择器 $("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签 $(&q ...

  9. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  10. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

随机推荐

  1. 青岛 2016ICPC 区域现场赛题目

    A. Relic Discovery B. Pocket Cube C. Pocky D. Lucky Coins E. Fibonacci F. Lambda Calculus G. Coding ...

  2. Visual C++ 8.0对象布局

    哈哈,从M$ Visual C++ Team的Andy Rich那里又偷学到一招:VC8的隐含编译项/d1reportSingleClassLayout和/d1reportAllClassLayout ...

  3. 爬虫学习之-git拉取远程错误

    本文讲的是把git在最新2.9.2,合并pull两个不同的项目,出现的问题如何去解决 如果合并了两个不同的开始提交的仓库,在新的 git 会发现这两个仓库可能不是同一个,为了防止开发者上传错误,于是就 ...

  4. 超强汇总！110 道 Python 面试笔试题

    https://mp.weixin.qq.com/s/hDQrimihoaHSbrtjLybZLA 今天给大家分享了110道面试题,其中大部分是巩固基本python知识点,希望刚刚入手python,对 ...

  5. Maven 私服安装和启动

    在安装私服的时候容易碰到的两个问题,一个是安装时拒绝访问,另一个是安装完成后服务无法启动: 拒绝访问问题: 原因:没有以管理员身份运行 cmd 解决办法: 如果是 win7 的话,可以直接在 [运行- ...

  6. Centos 7 环境下，如何使用 Apache 实现 SSL 虚拟主机 双向认证 的详细教程：

    1. testing ! ... 1 1 原文参考链接: http://showerlee.blog.51cto.com/2047005/1266712 很久没有更新LAMP的相关文档了,刚好最近单位 ...

  7. POJ3709_K-Anonymous Sequence

     题意很简单,给你若干个数字,你需要减去一些数字,使得在数列中的每个数字出现的次数不少于k次. 一开始我们都会想到是用DP,于是很快我们就可以得出状态为搞定前面i个数所需要花费的最小代价用f[i]表示 ...

  8. P1053 篝火晚会

    题目描述 佳佳刚进高中,在军训的时候,由于佳佳吃苦耐劳,很快得到了教官的赏识,成为了“小教官”.在军训结束的那天晚上,佳佳被命令组织同学们进行篝火晚会.一共有nnn个同学,编号从111到nnn.一开始 ...

  9. 洛谷P1352 没有上司的舞会——树形DP

    第一次自己写树形DP的题,发个博客纪念`- 题目来源:P1352 没有上司的舞会 题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结 ...

  10. Day20-初识Ajax

    想要实现的功能:点击提交以后,让数据发到后台进行验证,但是页面不刷新.悄悄提交用Ajax. 那么返回的字符串怎么样展示到前端HTML页面呢?可以在HTML中写个标签,定义一个选择器. 利用$('#id ...