CSS 伪类、伪元素

最新推荐文章于 2024-01-04 20:27:03 发布

ANKG

最新推荐文章于 2024-01-04 20:27:03 发布

阅读量273

点赞数

文章标签： CSS伪元素 CSS伪类

本文链接：https://blog.csdn.net/zhangank/article/details/94445391

版权

1、CSS 伪类用于向某些选择器添加特殊的效果。如使用 CSS 伪类向文本超链接添加复杂而多样的样式。

2、CSS 伪元素用于向某些选择器设置特殊效果。

一、伪类就是一些规定的，标签里面没有定义这个类，但是样式表里偏要在这个标签上用。

语法

伪类的语法：

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

伪类：
<style type="text/css">
a:link {color: #000000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>

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

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

提示：伪类名称对大小写不敏感。

或

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

<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>

<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。</p>

</body>

一般：

最常用的方法是a {CSS属性} a后面什么也没有，代表一次定义这四个属性。

<style>
.AWZ_5 li a{ color:#FFFFFF; display:block; text-align:center; background:rgb(255,255,255);}
</style>

二、伪元素就是一些规定的几个属性，标签里面没有写，但是样式表里偏要在这个标签上用。

语法

伪元素的语法：

selector:pseudo-element {property:value;}

CSS 类也可以与伪元素配合使用：

selector.class:pseudo-element {property:value;}

伪元素

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

例子1：

<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>

注释："first-line" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-line" 伪元素：

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

例子2：

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片：

h1:after
  {
  content:url(logo.gif);
  }

ANKG

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 伪类、伪元素

1、CSS 伪类用于向某些选择器添加特殊的效果。如使用 CSS 伪类向文本超链接添加复杂而多样的样式。2、CSS 伪元素用于向某些选择器设置特殊效果。一、伪类就是一些规定的，标签里面没有定义这个类，但是样式表里偏要在这个标签上用。语法伪类的语法：selector : pseudo-class {property: value}CSS 类也可与伪类搭配使用。sele...
复制链接

扫一扫