css3 -- 伪类与伪元素
伪类:
1、结构伪类
A:E : first-child{}
E : nth-*(n){}
E : first-*(even){}
E : first-*(odd){}
B:nth-child 是根据其父元素中国子元素的总数进行计算
nth-of-type 是根据特定类型的子元素进行计数
nth-last-child 与nth-child类似,不过是从最后开始计算
nth-last-of-type 与nth-of-type 类似,不过是从最后开始计算
C:first-of-type 、last-child、last-of-type区别于nth-child与nth-of-type类似,是相对于特定元素或相对于父元素的第一个元素或最后一个元素
D:only-child :有一个父元素,但没有任何的兄弟元素
only-of-type : 没有相同类型的兄弟元素
2、target伪类
在涉及的URI呗使用的时候,将样式应用到元素中
3、empty伪类
选择没有子元素(包含文本节点)的元素
4、root伪类
选择文档树中的第一个元素,在HTML中,root永远是html元素,使用root可以将html元素赋予更高的特殊度
5、not伪类
E:not(F){} 选择除了作为参数值给出的元素之外的所有元素
传入not伪类的参数都必须是一个简单选择器
伪元素:
1、CSS2中:
:first-line
:first-letter
:after
:before
2、CSS3中,没有添加新的伪元素,但对伪元素的定义稍微进行了优化
::first-line
::first-letter
::after
::before
3、::selection 选择器匹配被用户选取的选取部分
p::selection {
color:white;
}
Opera以及Webkit已经实现了,Firefox通过前缀实现
以上伪类以及伪元素要考虑IE8
css3 -- 伪类与伪元素的更多相关文章
- CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
- CSS3伪类和伪元素
作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...
- css3怎么分清伪类和伪元素
伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lan ...
- CSS3伪类和伪元素的特性和区别尤其是 ::after和::before
伪类和伪元素的理解 官方解释: 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA).随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“ ...
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...
- css3的伪(伪类和伪元素)大合集
本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...
- CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
随机推荐
- 关于java中Double类型的运算精度问题
标题 在Java中实现浮点数的精确计算 AYellow(原作) 修改 关键字 Java 浮点数 精确计算 问题的提出:如果我们编译运行下面这个程序会看到什么?publi ...
- Gym 100703K Word order 贪心
题目链接 题意:给定一个长度为n的字符串,字符串仅由"F","N","A"三种字符组成,现有一种操作P,即把两个相邻的字符调换位置.要求把所 ...
- osgi学习
Bundle可以被动态地安装.启动.停止和卸载.Bundle是服务(Service)和组件(Component)的载体.在OSGi中,每个Bundle都有自己独立于其他Bundle的ClassLoad ...
- C#索引器一
索引器允许类或者结构的实例按照与数组相同的方式进行索引取值,索引器与属性类似,不同的是索引器的访问是带参的. 索引器和数组比较: (1)索引器的索引值(Index)类型不受限制 (2)索引器允许重载 ...
- MyString(重写String)
http://wenku.baidu.com/view/d7ac113243323968011c925b.html 已知类String的原型为: class String { public: ...
- Good Bye 2015B(模拟或者二进制枚举)
B. New Year and Old Property time limit per test 2 seconds memory limit per test 256 megabytes input ...
- 动手动脑及java程序之用消息框进行数的运算
动手动脑 自信成就人生 动手动脑1 ✿仔细阅读示例: EnumTest.java,运行它,分析运行结果? package demo; public class Test { publi ...
- 使用dynatrace+showslow进行前端性能测试
1.背景 应用的性能测试与优化目前主要停留在服务器端的反馈,而对于前端性能标准的研究与测试相对比较空白,缺乏统一的标准与工具.众所周知,浏览器html组件的下载及渲染性能直接影响最终的用户体验,目前应 ...
- Android画面显示原理
转自: http://blog.csdn.net/luoshengyang/article/details/7691321/ http://blog.chinaunix.net/uid-1675954 ...
- 基于类和基于函数的python多线程样例
不断的练,加深记忆吧. #!/usr/bin/env python # -*- coding: utf-8 -*- import threading import time exitFlag = 0 ...