您的位置：首页 > Web前端 > CSS

CSS_伪元素_伪类

2017-02-19 14:10 357 查看

伪类

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 class 伪类伪元素

相关文章推荐

新的分享

章节导航