CSS伪类及伪元素的知识和使用

最新推荐文章于 2024-07-25 08:14:42 发布

乞儿不再叫江

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量1.7k

点赞数

文章标签： css class ie 浏览器 firefox border

本文链接：https://blog.csdn.net/qierjiang/article/details/6722599

版权

学习WEb技术当然首先要先学好HTMl和CSS基础知识和使用，但仅仅学习他们的一些基础标签、元素、以及颜色布局是不够的，要学就应该深入的去了解，用这些基础的只是做出更好的效果。

这里讲解一点关于CSS伪类和伪元素的用法

一：CSS伪类用于向某些选择器添加特殊效果。

先看看例子：

<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>

<body>
<p>请把鼠标移动到这些链接上，以查看效果：</p>

<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p>
</body>

</html>

PS: four中的monospace在IE6上才能看到效果, ...？

伪类的语法：

selector : pseudo-class {property: value}

和CSS一起使用：

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

伪类的种类：

属性描述 css

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

以上均可用于IE8.0以上及其他主流支持CSS3.0的浏览器，ie6.0好像只能看到css1的伪类效果；

第一个例子中有 :link :visited :hover 的使用

下面来看看在CSS2中出现的 :first-child :lang

:first-child 伪类向元素的第一个子元素添加样式。

<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。

设定：

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

则第一个p元素样式为黑体第一个子元素li为大写同理可设其他的；

:lang 伪类向带有指定 lang 属性的元素添加样式。

:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：

<html>
<head>
<style type="text/css">
q:lang(no)
  {
  quotes: "@@@@" "****"
  }
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>

</html>

PS: 所有主流浏览器支持:lang IE为8.0以上～

PS: 以上为伪类的基本用法，详情参见W3School

下面讲一些伪类的灵活运用的实例：

:hover 简单的放大效果：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
.larger {
 width:100px;
 padding:40px;
 overflow:auto;
}
.larger a img {
 width:20px;
 height:20px;
 border:none;
}
.larger a:hover img {
 width:80px;
 height:80px;
}
</style>	
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>放大效果</title>
</head>
<body>
<h3>简单的放大效果：</h3>
<div class="larger">
 <a href="#9"><img src="4.jpg" alt="放大" title="放大" /></a>
</div>
</body>
</html>

这样的使用可以减少使用js代码，也便于操作；

用css3伪类target制作tab选项卡效果：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选项卡</title>
<style type="text/css">
.tab_box {
clear:both;
height:40px;
}
.tab_box li {
float:left;
border:1px solid #CCC;
margin:0 5px 0 0;
list-style:none;
padding:5px;
}
.tab_content {
clear:both;
border:1px solid #CCC;
padding:20px;
margin:40px;
 position: absolute;
 z-index:-1;
 background:#0FF;
width:300px;
height:200px;
}
 #tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}

</style>
</head>

<body>
<div class="tab_box">
<ul class="tabs">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">
第一层内容</div>
<div id="tab2" class="tab_content">
第二层内容</div>
<div id="tab3" class="tab_content">
第三层内容</div>
</div> 

</body>
</html>

等等～都是不错的使用！

二：伪元素的使用和方法：

用途同伪类，语法相似：

selector:pseudo-element {property:value;}

和CSS配合使用

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

CSS3.0前的为元素有4种：

伪元素               作用                            IE    Firefox    W3C 
:first-letter     将特殊的样式添加到文本的首字母   5    1           1 
:first-line       将特殊的样式添加到文本的首行     5    1           1 
:before           在某元素之前插入某些内容               1.5         2 
:after            在某元素之后插入某些内容               1.5         2

简单讲解一下：

:first-line 伪元素用于向文本的首行设置特殊样式。

:first-letter 用于文本首字母的特殊样式使用。 PS: 这俩个伪元素只能用于块级元素。

伪元素和CSS类配合使用：

p.article:first-letter
  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>

多重为元素的使用：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;//字体为决定大小
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }

:before :after 为在元素的内容之前和之后插入新内容

下面看一个首字母下沉的特效：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>
<body>
<p>
首字母下沉 : first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
</body>
</html>

以上是CSS中的伪类和伪元素的相关知识，如果灵活运用会制作很多不同的效果！！

乞儿不再叫江

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
CSS伪类及伪元素的知识和使用

学习WEb技术当然首先要先学好HTMl和CSS基础知识和使用，但仅仅学习他们的一些基础标签、元素、以及颜色布局是不够的，要学就应该深入的去了解，用这些基础的只是做出更好的效果。这里讲解一点关于CSS伪类和伪元素的用法一：CSS伪类用于向某些选择器添加特殊效
复制链接

扫一扫