伪类选择器
伪类选择器: 和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。
常用的伪类选择器是使用在a元素上的几种,`如a:link|a:visited|a:hover|a:active`
提示:在 CSS 定义中,a:hover
必须被置于 a:link
和 a:visited
之后,才是有效的。
提示:在 CSS 定义中,a:active
必须被置于 a:hover
之后,才是有效的。
伪元素选择器
伪元素选择器:伪元素的效果是需要通过添加一个实际的元素才能达到的。
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()
从某父元素的最后一个子元素开始计算,来选择特定的元素。
: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)选择第一个元素。
“:nth-of-type(n)
”选择器和“:nth-child(n)
”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)
”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。
":only-child
"表示的是一个元素是它的父元素的唯一一个子元素。
css3中的伪元素
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
用来改变浏览网页选中文的默认效果
UI状态元素伪类选择器
E:checked : {attribute}
匹配所有用户界面(form表单)中处于选中状态的元素E
E:enabled : {attribute}
匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled : {attribute}
匹配所有用户界面(form表单)中处于不可用状态的E元素
E::selection : {attribute}
匹配E元素中被用户选中或处于高亮状态的部分
目标伪类
E:target : {attribute}
匹配相关URL指向的E元素
伪类与伪元素的区别
这里我大可以列一个表格,把所有的伪类和伪元素分开罗列,但这未免太形式化,与其记住“哪些是哪些不是”,不如真正地加以区分。伪类和伪元素本身就有一个根本的不同之处,这点直接体现在了标准的描述语句上。
先看一个伪元素 first-line 例子。现在有一段HTML,内容是一个段落:
<p>I am the bone of my sword. Steel is my body, and fire is my blood.
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>
如果我要描述这个段落的第一行,在不用伪元素的情况下,我会怎么做?想来我一定要嵌套一层 span,然后加上类名:
<p><span class="first-line">I am the bone of my sword. Steel is my body, and fire is my blood. </span>
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>
再反观一个伪类 first-child 的例子,有一个简单的列表:
<ul>
<li></li>
<li></li>
</ul>
如果我要描述 ul 的第一个元素,我无须嵌套新的元素,我只须给第一个已经存在的 li 添加一个类名就可以了:
<ul>
<li class="first-child"></li>
<li></li>
</ul>
尽管,第一行和第一个元素,这两者的语意相似,但最后作用的效果却完全不同。所以,伪类和伪元素的根本区别在于:它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看,如果需要添加新元素加以标识的,就是伪元素,反之,如果只需要在既有元素上添加类别的,就是伪类。而这也是为什么,标准精确地使用 “create” 一词来解释伪元素,而使用 “classify” 一词来解释伪类的原因。一个描述的是新创建出来的“幽灵”元素,另一个则是描述已经存在的符合“幽灵”类别的元素。
伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。
伪类和伪元素混淆的由来
最为混淆的,可能是大部分人都将 :before 和 :after 这样的伪元素随口叫做伪类,而且即使在概念混淆的情况下,实际使用上也毫无问题——因为即使概念混淆,对真正使用也不会造成多少麻烦:)
CSS Selector Level 3 为了区分这两者的混淆,而特意用冒号加以区分:
伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line
并且规定,浏览器既要兼容CSS1和2里既存的伪元素的单冒号表示,同时又要不兼容CSS3新引入的伪元素的单冒号表示。后来的结果大家都知道,因为低版本IE对双冒号的兼容问题,几乎所有的CSSer在写样式的时候都不约而同的使用了单冒号。这无形中,让这种混淆延续了下来。而CSS3新伪元素的使用到目前为止,还远远不成气候。