伪类与伪元素

伪类：在特殊性中占据0,0,1,0

　　：link

　　　　向未访问的链接添加特殊的样式。也就是说，链接所指的 URI 尚未出现在用户代理的历史中。这种状态与 :visited状态是互斥的。

　　：visited

　　　　对已访问的链接添加样式。

　　：hover

　　　　对鼠标悬停时的链接应用样式

　　：foucs

　　　　对鼠标聚焦的链接应用样式

　　：active

　　　　向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。

　　对于上述伪类，要遵循顺序书写！！

　　：nth-child(n)

　　　　从父元素匹配索引为n的子元素，设置样式，n从1开始 nth-child(1)与first-child相同

<body>

    <div>

        <p>p1</p>

        <p>p2</p>

        <span>span1</span>

        <span>span2</span>

    </div>

</body>

div p:nth-child(1)时 为第一个p元素应用样式

div span:nth-child(1)时 匹配不到任何元素，以为span为div的第三个子元素

　　：nth-of-type(n)

　　　　从父元素匹配第n个指定元素的子元素  nth-of-type(1)与first-of-type相同

div p:nth-of-type(1)时 为p1应用样式

div span:nth-of-type(1)时 为span1应用样式

　　：target

　　　　在涉及的uri被使用的时候，把样式应用到指定元素上。

　　：empty

　　　　选择没有子元素（包括文本节点）的元素。

　　：root　

　　　　选择文档树中的第一个元素 在html中 root永远指定html元素,主要是为了提高权重。

　　：not

　　　　E:not(F){}，选择父元素E中除了F的所有元素 应用样式。

　　：checked

　　　　选择被选中的元素应用样式，多用于表单的单选，复选框。

　　：disabled/：enable

　　　　选择禁止输入/允许输入的元素应用样式，多用于input中

伪元素：所有的伪元素都必须放在所有选择器之后,其特殊性为0,0,0,1

　　：：first-letter

　　　　设置首字母样式

　　：：first-line

　　　　设置第一行样式

　　：：before

　　　　E::before{content:"";color:red;}

　　　　对E元素之前添加一个行内元素，其内容为content中的内容，可自行设置样式

　　：：after

　　　　与::before相反

CSS——伪元素与伪类的更多相关文章

  1. CSS的伪元素和伪类

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

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

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

  3. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

  4. CSS和CSS3中的伪元素和伪类（总结）

    好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...

  5. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

  6. CSS（二）- 选择器 - 伪元素和伪类（思维导图）

    伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...

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

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

  8. CSS3伪元素、伪类选择器

    伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...

  9. css隐藏元素的六类13种方法

    隐藏元素的方法 隐藏元素的方法可以总结为六类:直接隐藏.对溢出内容隐藏.对元素透明度进行调整.将元素移除当前屏幕.对元素的层级关系进行调整.对元素进行裁剪 只有对元素的透明度进行调整才可以点击,其余都 ...

随机推荐

  1. Spring 教程（二）

    一.Spring AOP介绍 开发其实就是在不断的重构,抽象重复代码,然后进行封装.从最原始的模块化编程到面向对象编程,代码的封装越来越整齐清晰,但是依然存在重复的代码,而这些重复代码几乎都是与业务逻 ...

  2. C# 中的结构类型（struct）

    原文 C# 中的结构类型(struct) 简介 有时候,类中只包含极少的数据,因为管理堆而造成的开销显得极不合算.这种情况下,更好的做法是使用结构(struct)类型.由于 struct 是值类型,是 ...

  3. SSL 通信原理及Tomcat SSL 配置

    SSL 通信原理及Tomcat SSL 双向配置 目录1 参考资料 .................................................................. ...

  4. EF5.0修改实体的时候，出现“对一个或多个实体的验证失败。有关详细信息，请参见“EntityValidationErrors”属性这个错误

    对于这个错误,要在SaveChanges前关闭验证实体有效性(ValidateOnSaveEnabled)这个开关 db.Configuration.ValidateOnSaveEnabled = f ...

  5. MFC文档、视图和框架

    文档.视图.框架 文档/视图结构是MFC提供的一种不错的设计,它将数据的处理和显示分开来,这样更便于我们对程序的维护和扩展. 文档        文档对象用于管理和维护数据,包括保存数据.取出数据以及 ...

  6. [解决]Kali Linux DHCP自动获取IP失败 坑爹的VMWare桥接

    root@kali:~# service networking restart [....] Running /etc/init.d/networking restart is deprecated ...

  7. 恒天云技术分享系列3 – KVM性能调优

    恒天云技术分享:http://www.hengtianyun.com/download-show-id-11.html KVM是什么 KVM 是 kernel-based Virtual Machin ...

  8. VS2010 error C2664: “CWnd::MessageBoxW”: 不能将参数 1 从“const char [3]”转换为“LPCTSTR”

    VS2010 (VC2010)建立工程时默认的字符集是Unicode,所以在代码中使用MessageBox时需要输入Unicode,用TEXT()这个宏输入参数,否则会报错:   代码:Message ...

  9. 第1组UI组件：布局管理器

    1 布局管理的来源 为了让UI在不同的手机屏幕上都能运行良好----不同手机屏幕的分辨率/尺寸并不完全相同,如果让程序手动控制每个组件的大小.位置,会给编程带来巨大的麻烦.为了解决这个问题.andro ...

  10. ecshop如何去除后台左侧云服务中心菜单

    介绍一下如何去除后台云服务中心菜单: 打开admin/templates/menu.htm,把539行的 document.getElementById("menu-ul").in ...