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

css伪类伪元素

2016-03-11 09:24 567 查看
根据元素的特殊状态来选取元素（伪类）

根据元素中特别的内容（伪元素）

伪类和伪元素的表示形式也使用“:”（英文冒号）与其它选择器相区分

1.伪类

根据元素的特殊状态来选取元素

:link

伪类将应用于未被访问过的链接，与:visited互斥。

你只要点击一次浏览器的缓存就会记住你的选择,过一定时间就会没有了.

:hover

伪类将应用于有鼠标指针悬停于其上的元素。

:active

伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited

伪类将应用于已经被访问过的链接，与:link互斥。

需要注意的是在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。

:link、:visited、:hover、:active

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<a href="http://www.qq.com" target="_blank">腾讯qq</a>
<a href="http://edn.ncut">好123</a>
</body>
</html>


@charset "utf-8";
/* CSS Document */
a[href]:linked
{
color:red;
}
a[href]:visited
{
color:#93C;
}
a[href]:hover
{
font-weight:bold;
}
a[href]:active
{
background-color:blue;
}


:focus

伪类将应用于拥有键盘输入焦点的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
请输入姓名<input type="text">
</body>
</html>


@charset "utf-8";
/* CSS Document */
input[type]:focus
{
background-color:blue;
}




:first-child

伪类将应用于元素在页面(或者在父容器)中第一次出现的时候。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>
<p>你好！</p>
<p>问候</p>
<div>
<p>问候</p>
<p>你好</p>
</div>
</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
p:first-child
{
background-color:blue;
}




:lang

伪类将应用于元素带有指定lang的情况。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<p lang="cn">中文</p>
<p lang="en">aaaa</p>
</body>
</html>


@charset "utf-8";
/* CSS Document */
p:lang(cn)
{
font-weight:bold;
}




2.伪元素

根据元素中特别的内容（伪元素）

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

:first-letter

伪元素的样式将应用于元素文本的第一个字（母）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<p>中文</p>
<p>aaaa</p>
</body>
</html>


@charset "utf-8";
/* CSS Document */
p:first-letter
{
font-size:40px;
}




:first-line

伪元素的样式将应用于元素文本的第一行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<p>中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文</p>
<p>aaaa</p>
</body>
</html>


@charset "utf-8";
/* CSS Document */
p:first-line
{
font-size:40px;
}




:before

在元素内容的最前面添加新内容。

举例

在每个 <p> 元素的内容之前插入新内容：

p:before

{

content:"台词：";

}

p:before

{

content:"台词：-";

background-color:yellow;

color:red;

font-weight:bold;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<p>我是谁谁谁！！！</p>
</body>
</html>


@charset "utf-8";
/* CSS Document */
p:before
{
content:"台词：-";
background-color:yellow;
color:red;
font-weight:bold;
}




:after

同before 在最后面操作
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航