伪类

link 未访问的链接
visited 已访问的链接
hover 鼠标移到元素上
active 向被激活的链接添加样式
focus 获得输入焦点的元素
first-child 作为某元素的第一个子元素的元素
lang 向带有指定lang属性的元素添加样式

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

<html>
<head>
<style type="text/css">
a:link{
color:green;
background-color:#ccc;
}
</style>
</head><body>
<p>这是一个<a href="#">段落</a></p>
</body>
</html>

效果如下：

focus

用于有焦点的元素。比如输入框和链接。但并不是所有元素都有焦点

<html>
<head>
<style type="text/css">
input:focus{
background-color:blue;
}
</style>
</head><body>
<input type="input">
</body>
</html>

first-child

如果一个A元素在另一个元素B当中，并且A是B的第一个子元素，那么可以控制A的样式
必须声明才能在 IE 中生效。

<html>
<head>
<style type="text/css">
p:first-child{
color:blue;
}
</style>
</head><body>
<div>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
</div>
</body>
</html>

效果图：

伪元素

first-line / :irst-letter

对文本的首行(首字母)应用样式

p:first-line{
background-color:green;
}

这样的效果是：

before / after

可以在元素的内容前面（后面）插入新内容

<style type="text/css">
h1:before {content:url(http://i1.piimg.com/584041/f052aa9790db915b.png);}
</style>

效果如下：

quotes : ‘String’ ‘String’ ‘String’ ‘String’

规定引号的类型,前两个表示第一层引用的符号，后两个表示第二层引用的符号。
使用时用<q></q>表示引号出现的位置。

<head>
<style type="text/css">
q:lang(en)
{
quotes: '@' '#' "'" "'"
}
</style>
</head><body>
<p><q>This is a <q>big</q> quote.</q></p>
</body>

结果是：@This is a ‘big’ quote.#

CSS_伪元素_伪类相关推荐

巧用伪元素和伪类让我们的html结构更清晰合理
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 伪类 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-ch ...
css横向排列_CSS中伪元素和伪类的经典使用技巧
随着前端技术的发展,CSS样式的制作在网页中占据着十分重要的地位.前台页面的样式布局.以及展现给用户的体验效果都离不开CSS;虽然在实际的开发中会大量的使用一些主流的UI样式框架,但这些样式框架每一个 ...
CSS伪类(Pseudo-classes)、伪元素、伪类选择器
CSS伪类(Pseudo-classes)和伪元素(详细) 那什么是伪类? 伪类是添加到选择器上的关键字,指定元素的特殊状态,伪类可以根据内容的状态来应用不同的样式: 伪类选择元素基于的是当前元素处于 ...
什么是伪类和伪元素？伪类和伪元素的区别的区别详解
1.伪类用来添加一些选择器的特殊效果. 2.伪元素伪元素是用来添加一些选择器的特殊效果. 3.区别伪元素其实相当于伪造了一个元素,例如before,first-letter达到的效果就是伪造了一 ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
浅析什么是伪类和伪元素？伪类和伪元素的区别解析
一.理解什么是伪类?什么是伪元素? 1.伪类种类伪类作用对象是整个元素 a:link{color:#111} a:hover{color:#222}div:first-child{color:#33 ...
css常用属性初总结:伪元素和伪元素
前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...
css中什么是伪元素,CSS伪元素是什么？
什么?伪元素?之前不是说了伪类吗,怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵,其实伪类和伪元素是两个不同的概念,今天小编就为大家介绍一下伪元素. 一.什么是伪元素 css伪元素代表了某个元素的子 ...
CSS3伪元素、伪类选择器
伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...

CSS_伪元素_伪类

伪类