CSS常用伪类和伪元素使用详解

曲奇饼 · 发表于 2020-3-16 13:54:25

伪类和为元素的写法

首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()

然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after

1.用于链接的几个伪类元素

:link          用这个可以设置未被访问的链接的样式

:visited       用这个设置已经被访问的链接的样式

:hover       用于设置将鼠标悬浮在链接上的样式

:active       用于设置鼠标点击链接时到鼠标松开时的样式

:focus          用于设置用键盘将焦点放在链接上时的样式（如用tab键或者上下键来移动页面焦点时）

上面的几个都比较简单。我简单以:hover为例。

<!DOCTYPE html>
<html>
<head>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>注释：</b>:hover 选择器鼠标指针在其上浮动的链接设置样式。</p>
</body>
</html>

复制代码

2.常用于列表元素<i>的几个伪类
:first-child                选中列表中的第一个元素

:last-child                选中列表中的最后一个元素

:nth-child()                括号里面的取值可以为三类：1)数字 :nth-child(3)表示选中父元素的第三个子元素

                                                                              2)自变量为n的表达式    :nth-child(3n)代表选中父元素的第3,6,9.....3n的子元素

                                                                              3)even或者odd    分别代表选中父元素的奇数或者偶数个子元素

:nth-last-child()       与 :nth-child()的不同点在于，这个是从最后一个元素开始计算，取值都是一样的。

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(3)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>

复制代码

注意是p元素的父元素<body>的第三个子元素哟，所以背景色才会出现在那个位置！！

3. :not()元素的使用

这个元素的使用很简单，举个栗子即可

<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:#000000;
}
:not(p)
{
color:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是 div 元素中的文本。</div>
<br>
<a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a>
</body>
</html>

复制代码

选中非<p>的其他所有元素

账号		自动登录	找回密码
密码			注册账号

[CSS] CSS常用伪类和伪元素使用详解

浏览过的版块

【江湖新秀】

【我是小土豪】

【宝剑回鞘】

【泰拉达人】

【奥运选手】