Forever

Do one thing at a time, and do well.

css之伪类和伪元素

CSS伪类和伪元素知识整理:

1.伪类:元素不同状态表现不同样式

静态伪类:只能用于超链接,也就是只能用于a标签,用得少
link:超链接点击之前的样式
visited:超链接点击之后的样式

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>静态伪类</title>
<style type=”text/css”>
a:link{
color: yellowgreen;
}
a:visited{
color: yellow;
}
</style>
</head>
<body>
<a href=”http://www.baidu.com”>百度</a>
</body>
</html>

2.动态伪类:能用任何元素

hover:鼠标放到元素上的状态,最常用的状态;
active:点击时没有松开鼠标的状态,用得不多;
focus:输入框在获得焦点时的状态;

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
div:hover{
color: blue;font-size: 20px;font-weight: 600;
}
div:active{
color: red;
}
input:focus{
color: seagreen;
}
</style>
</head>
<body>

<div>西贝博客</div>

<input type=”text” value=”请输入…” />

</body>
</html>

3.伪元素:文档结构中没有出现的元素

伪元素使用“::”
::first-letter 选择的是元素中第一个文字
::first-line 选择的是元素中第一行文字,会根据浏览器的缩放自动调整

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>伪元素</title>
<style type=”text/css”>
/*div::first-letter{
color: red;
}*/

div::first-line{
color: blue;
}
</style>
</head>
<body>

<div>
西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客西贝博客
</div>

</body>
</html>

 

4.伪元素:文档结构中没有出现的元素

::before 在元素内容之前添加新内容。必须配合content使用
::after 在元素内容之后添加新内容。必须配合content使用
可以把伪元素当成元素来使用

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>伪元素</title>
<style type=”text/css”>
/*div::before{
content: “www.wenancehua.net”;
}*/

div::after{
content: “www.wenancehua.net”;
color: red;
font-size: 12px;
display: block;
}
</style>
</head>
<body>

<div>
文案策划网
</div>

</body>
</html>

点赞

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注