CSS常用伪类使用详解

最新推荐文章于 2024-10-06 15:03:22 发布

绵羊万

最新推荐文章于 2024-10-06 15:03:22 发布

阅读量1.2w

点赞数 10

分类专栏： CSS 文章标签：伪类 :not() :nth-child :active

本文链接：https://blog.csdn.net/Allenyhy/article/details/81565989

版权

CSS 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

首先伪类是用单冒号表示：如: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>

上面的W3Sschool就是将鼠标浮动在上面的样式（背景为黄色），这里看不见鼠标是截图的鼠标自动消失了，事实上是存在的。

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>的其他所有元素