css伪类

css伪类
千次阅读
2018-02-11 20:10:01
关于css伪类

包括两种：UI伪类结构化伪类

一 UI伪类：基于特定HTML元素的状态应用样式。

1 链接伪类（四种状态）

link 点击前；Visited 点击之后；Hover 鼠标悬停在链接上；Active 点击时；

以下是4个伪类选择符：
```
a:link{color:black;}
a:visited{color: #ccc;}
a:hover{text-decoration: none;}
a:active{color: black;}
```
PS:有些伪类可以用于任何元素,例：

p:hover{background-color:gray;}

2 focus伪类 e:focus

e表示任何元素，如p,h1,input

表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。下面的规则

input:focus {border:1px solid blue;}
会在光标位于input字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。
3 target伪类   e:target

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target伪类选中它

二结构化伪类

1 first-child和last-child

e:first-child   e:last-child

:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。

#main ul li:first-child{color:red} 表示将ul下的第一个元素颜色设置为红色
#main ul li:last-child{color:red}表示将ul下的最后一个元素颜色设置为红色

2 nth-child

e:nth-child(n)

设置属于其父元素的第n个子元素
3 伪元素

1 ::first-letter伪元素 e::first-letter (一般用于段落的第一个字）

比如：p::first-letter {font-size:300%;} 段落首字符放大效果

   2 ::first-line伪元素 e::first-line （一般用于段落的第一行）
    比如:p::first-line{font-variant:small-caps;} 把第一行变成了大写字母显示
   3 ::before和::after

可用于在特定元素前面或后面添加特殊内容。

   以下标记：

<p class="age">25</p>

和如下样式：

p.age::before {content:"Age: ";}

p.age::after {content:" years.";}

注意，每个content属性值中都包含了空格，以便输出结果中有适当的空距。

能得到以下结果：

Age: 25 years.
更多相关内容
CSS伪类
2020-12-09 02:55:49

W3C：“W3C” 列的数字显示出伪类属性由哪个 CSS 标准定义（CSS1 还是 CSS2）。伪类作用 IE F N W3C :active 将样式添加到被激活的元素 4 1 8 1 :focus 将样式添加到被选中的元素 – – – 2 :hover 当...

收起
CSS 伪类修改input选中样式的示例代码
2020-11-20 01:17:09

下面通过代码看下CSS 伪类修改input选中样式的示例代码，代码如下所示：主要是用到了after伪类和字体符号。 input{ -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-...

收起
CSS 伪类(Pseudo-classes)
2020-12-14 04:12:06

CSS伪类是用来添加一些选择器的特殊效果。语法伪类的语法： selector:pseudo-class {property:value;} CSS类也可以使用伪类： selector.class:pseudo-class {property:value;} anchor伪类在支持 CSS 的浏览器中...

收起
css伪类 右下角点击出现对号角标表示选中的示例代码
2021-01-19 11:04:52

css: .s_type { border: none; border-radius: 5px; background-color: #f3f3f3; padding: 7px 0; color: #606266; margin: 5px 2.5% 5px 0; width: 30%; position: relative; } .selecd { background-...

收起
css-click:css 伪类
2021-07-12 20:37:39

css-click css 伪类 :click

收起

JavaScript

CSS 伪类: 什么是 CSS 伪类？CSS 伪类怎么分类？ CSS 伪类有哪些？以及分类对应的伪类

千次阅读 2021-07-05 17:04:03

本章讲解的内容为 CSS 伪类。废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。一: 什么是 CSS 伪类？ 1. CSS 伪类是用来添加一些 '选择器' 的特殊效果(特殊状态)...

本章讲解的内容为 CSS 伪类。

废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

一: 什么是 CSS 伪类？

1. CSS 伪类是用来添加一些 '选择器' 的特殊效果(特殊状态)。

2. 伪类实际使用场景举例:
   1. 设置鼠标悬停在元素上时的样式 。
   2. 为已访问和未访问链接设置不同的样式 。
   3. 设置元素获得焦点时的样式 。

二: CSS 伪类选择器的分类（4类）:

1. 动态伪类选择器。

2. UI元素状态伪类选择器。

3. 结构伪类选择器。

4. 否定伪类选择器。

三: 所有CSS伪类/元素- - -总览

序号	选择器	示例	示例说明
1	:checked	input:checked	选择所有选中的表单元素
2	:disabled	input:disabled	选择所有禁用的表单元素
3	:empty	p:empty	选择所有没有子元素的p元素
4	:enabled	input:enabled	选择所有启用的表单元素
5	:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
6	:in-range	input:in-range	选择元素指定范围内的值
7	:invalid	input:invalid	选择所有无效的元素
8	:last-child	p:last-child	选择所有p元素的最后一个子元素
9	:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
10	:not(selector)	:not§	选择所有p以外的元素
11	:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
12	:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
13	:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
14	:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
15	:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
16	:only-child	p:only-child	选择所有仅有一个子元素的p元素
17	:optional	input:optional	选择没有"required"的元素属性
18	:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
19	:read-only	input:read-only	选择只读属性的元素属性
20	:read-write	input:read-write	选择没有只读属性的元素属性
21	:required	input:required	选择有"required"属性指定的元素属性
22	:root	root	选择文档的根元素
23	:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
24	:valid	input:valid	选择所有有效值的属性
25	:link	a:link	选择所有未访问链接
26	:visited	a:visited	选择所有访问过的链接
27	:active	a:active	选择正在活动链接
28	:hover	a:hover	把鼠标放在链接上的状态
29	:focus	input:focus	选择元素输入后具有焦点
30	:first-letter	p:first-letter	选择每个元素的第一个字母
31	:first-line	p:first-line	选择每个元素的第一行
32	:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
33	:before	p:before	在每个元素之前插入内容
34	:after	p:after	在每个元素之后插入内容
35	:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

1. CSS anchor 锚(动态)伪类选择器:

序号	anchor (锚)伪类	示例	示例说明
1	:link	a:link	未访问的链接
2	:visited	a:visited	已访问的链接
3	:hover	a:hover	把鼠标放在链接上的状态 (鼠标划过链接)
4	:active	a:active	已选中的链接

“anchor (锚)伪类选择器” 详细讲解地址: ‘CSS伪类–锚伪类选择器(动态伪类选择器)-详细总结’ 。

图片示例总览:

2. CSS UI元素状态伪类选择器

序号	UI元素状态伪类选择器	示例	示例说明
1	:focus
2	:checked
3	:selection
4	:enabled
5	:disabled
6	:read-write
7	:read-only
8	::before
9	::after

“UI元素状态伪类选择器” 详细讲解地址: ‘整理中’

3. CSS 结构伪类选择器

序号	结构伪类选择器	示例	示例说明
1	:first-child
2	:last-child
3	:nth-child()
4	:nth-last-chuild()
5	:nth-of-type()
6	:nth-last-of-type
7	:first-type()
8	:first-of-type
9	:last-of-type()
10	:only-child
11	:only-of-type
12	:empty
13	:root

“结构伪类选择器” 详细讲解地址: ‘整理中’

4. CSS 否定伪类选择器

序号	否定伪类选择器	示例	示例说明
1	:not()

“否定伪类选择器” 详细讲解地址: ‘整理中’

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题就是 “前端CSS” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁。

如果对你有所帮助，喜欢的可以点个关注, 必然回访; 文章会一直持续打磨。

有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。

收起

展开全文

前端

书写css伪类时冒号后多个空格导致该规则失效
2020-12-10 04:25:09

书写css伪类时冒号后多个空格导致该规则失效</title> <meta http-equiv=”Content-Type” content=”text/html;charset=gbk”/> <style type=”text/css”> a:link{color : gray;} a:visited{...

收起
CSS伪类对象before和after的用法实例详解
2020-09-25 07:05:03

两个伪类对象只有在清楚浮动clearfix的时候会用到哈，最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果

收起
CSS伪类:before在元素之前 :after 在元素之后实例讲解
2020-12-13 06:04:20

本教程简单的介绍一下关于CSS伪类:before, :after详解，有需要了解的朋友可以参考一下下。 :before 伪元素在元素之前添加内容这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素...

收起
浅谈CSS伪类与伪元素
2021-01-19 20:56:09

伪类选择器：CSS中已经定义好的选择器,不能随便取名 :link 伪类将应用于未被访问过的链接，与:visited互斥。 :hover 伪类将应用于有鼠标指针悬停于其上的元素。 :active 伪类将应用于被激活的元素，如被点击的链接、...

收起
CSS伪类选择器
千次阅读 多人点赞 2021-11-01 13:35:22
CSS的选择器有很多种，有一种选择器，与其他选择器完全不同，我们来讲一讲这个选择器——伪类选择器伪类选择器我们伪类选择器有几种，我们来看看第一种静态伪类: 只能用于超链接的样式 :link超链接点击之前 ...
CSS的选择器有很多种，有一种选择器，与其他选择器完全不同，我们来讲一讲这个选择器——伪类选择器

伪类选择器

伪类选择器：用来描述一个元素的特殊状态！比如第一个元素、某个元素的子元素、鼠标点击的元素

我们伪类选择器有几种，我们来看看第一种

静态伪类: 只能用于超链接的样式
- :link 超链接点击之前
- :visited 链接被访问过之后
以上两种样式，只能用于超链接

实际用法还得实际分析，我们来看看这一张图：

这里我写了两个超链接，看我箭头指的文章，你会发现这两个超链接颜色是不一样的

为什么会不一样呢？

因为第一个链接，是我访问过的网站链接

而第二个链接，我的浏览器没有访问过，系统会默认给访问过与没访问过的超链接显示不同的颜色

我们访问一下试试，看看他会不会变色

访问过后，第二个超链接的颜色也变成了第一个一样了

那么我们想让没访问过的链接显示其他颜色呢？

这时候就需要我们的伪类选择器上场了，我们在style标签里面用css伪类选择一下

我们使用link来选择没有访问过的超链接
```
<style>
        a:link{color: aqua;}
</style>
```
注意，我们的伪类选择器是使用“:”来连接

我们在添加一个超链接，也是没有访问过的网址

我们看看效果

这里，我们通过伪类选择器的link对没有访问过的网址进行颜色改变

而访问过的链接颜色没有变化

当我们访问之后，他也就不会被link选中了，所以访问过后，是这样的

到这，有人就问了，访问之前可以被选择，那我想要访问后的链接也变色可不可以呢？

当然可以，事物都有对立一面，编程也一样，可以选择访问之前的超链接，那就肯定可以选择访问之后的超链接

我们写个访问之后的选择，让它变成其他颜色
```
<style>
        a:link{color: aqua;}
        a:visited{color: chartreuse;}
</style>
```
下面那个a:visited就是另一个选择属性了，他会选择被访问过的超链接

我们看看被访问过的超链接有没有变色

最后，再补充一点，看看这张图！

我这里使用一个字体属性，将:visited选择中的字体变大，可是字体并没有改变，这是为什么呢？？？

因为为了保护隐私，我们的:visited只能改变颜色属性，其他都都不能改变，但是如果我改变:link选择的字体，将会是这样的

不管是访问过还是没有访问过的链接，他都改变了字体！这个区别记住就可以，我这里给个测试代码，大家运行对比一下效果
```
<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>

    <style>
        a:link{color: aqua;font-size: 10px;}
        a:visited{color: chartreuse;font-size: 50px;}
    </style>
</head>
<body>
    <h1>伪类选择器</h1>
    <h2>静态伪类</h2>
    <p>什么是静态伪类？</p>
    <a href="https://blog.janyork.com/">我的博客</a>
    <a href="https://hao.360.com/">360导航</a>
    <a href="https://qq.com/">腾讯网</a>
    <a href="https://google.com">GooGle</a>
</body>
</html>
```
这是，两个静态的伪类选择，我们还有一些其他状态的伪类选择

我们继续讲几个

动态伪类：针对所有标签都适用的样式
- :hover “悬停”：鼠标放到标签上的时候
- :active “激活”：鼠标点击标签，但是不松手时。
- :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
我们经常看到一些网页，可以让鼠标的样式在其中发生改变，也就是说，我们这种标签，是对于鼠标产生效果

比如，我要写一个鼠标悬停变色，我就得用伪类选择器的:hover来选择，我们来写一个
```
<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <title>伪类选择器</title>
    <style>
        h3:hover{color: cyan;font-size: 25px;}
    </style>
</head>
<body>
    <h2>伪类选择器</h2>
    <h3>静态伪类选择</h3>
    <h3>动态伪类选择</h3>
    <h3>其他伪类选择</h3>
</body>
</html>
```
这里有三个h3标签，我们使用hover对他进行选择
```
    <style>
        h3:hover{color: cyan;font-size: 25px;}
    </style>
```
当我们鼠标移动到标题时，标题会变成天蓝色，字体变成25个像素大小

比如这样

然后我们还可以看看第二个属性

:active可以让你鼠标点击但是不松开时显示你的CSS效果

我们也来写一下，直接加在上面的代码里面
```
    <style>
        h3:hover{color: cyan;font-size: 25px;}
        h3:active{color:darkmagenta;font-size: 10px;}
    </style>
```
这时，只要我在标题上按住左键，他就变成紫红色，字体缩小到10个像素大小

是不是觉得很好玩呢？

那么我们现在就玩一玩剩下的:focus选择

这个可没什么意思了，他是针对于输入框等其他内容的，这里我演示不了，大家可以去W3里面试试这个效果：

CSS :focus 伪类 (w3school.com.cn)https://www.w3school.com.cn/cssref/pr_pseudo_focus.asp#:~:text=%3Afocus%20%E4%BC%AA%E7%B1%BB%E5%9C%A8%E5%85%83%E7%B4%A0%E8%8E%B7%E5%BE%97%E7%84%A6%E7%82%B9%E6%97%B6%E5%90%91%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E7%89%B9%E6%AE%8A%E7%9A%84%E6%A0%B7%E5%BC%8F%E3%80%82%20%E6%B3%A8%E9%87%8A%EF%BC%9A%20IE%20%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E6%94%AF%E6%8C%81%E6%AD%A4%E5%B1%9E%E6%80%A7%E3%80%82%20%E8%BF%99%E4%B8%AA%E4%BC%AA%E7%B1%BB%E5%BA%94%E7%94%A8%E4%BA%8E%E6%9C%89%E7%84%A6%E7%82%B9%E7%9A%84%E5%85%83%E7%B4%A0%E3%80%82,%E4%BE%8B%E5%A6%82%20HTML%20%E4%B8%AD%E4%B8%80%E4%B8%AA%E6%9C%89%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E7%84%A6%E7%82%B9%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86%EF%BC%8C%E5%85%B6%E4%B8%AD%E5%87%BA%E7%8E%B0%E4%BA%86%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E5%85%89%E6%A0%87%EF%BC%9B%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%EF%BC%8C%E5%9C%A8%E7%94%A8%E6%88%B7%E5%BC%80%E5%A7%8B%E9%94%AE%E5%85%A5%E6%97%B6%EF%BC%8C%E6%96%87%E6%9C%AC%E4%BC%9A%E8%BE%93%E5%85%A5%E5%88%B0%E8%BF%99%E4%B8%AA%E8%BE%93%E5%85%A5%E6%A1%86%E3%80%82%20%E5%85%B6%E4%BB%96%E5%85%83%E7%B4%A0%EF%BC%88%E5%A6%82%E8%B6%85%E9%93%BE%E6%8E%A5%EF%BC%89%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%9C%89%E7%84%A6%E7%82%B9%EF%BC%8C%E4%B8%8D%E8%BF%87%20CSS%20%E6%B2%A1%E6%9C%89%E5%AE%9A%E4%B9%89%E5%93%AA%E4%BA%9B%E5%85%83%E7%B4%A0%E5%8F%AF%E4%BB%A5%E6%9C%89%E7%84%A6%E7%82%B9%E3%80%82大家可以试试上面两个效果，不想亲自写可以复制我的，打开就可以观察属性变化了
```
<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <title>伪类选择器</title>
    <style>
        h3:hover{color: cyan;font-size: 25px;}
        h3:active{color:darkmagenta;font-size: 10px;}
        h3:focus{color: green;font-size: 30;}
    </style>
</head>
<body>
    <h2>伪类选择器</h2>
    <h3>静态伪类选择</h3>
    <h3>动态伪类选择</h3>
    <h3>其他伪类选择</h3>
</body>
</html>
```
其他伪类选择

我们有时候会用到一些像列表一样的结构，比如这样
```
<ui>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ui>
```
如果我们想让它的第一个标签变色呢？该怎么选择？

有人说，那多简单啊，加个class或者id都可以

但是，当我将第一行删去，第二行就变成第一行，那此时第二行没有id，也没有class，那就不会变色，但是我要求第一行始终是我要的效果啊！

那，这个时候，就可以用我们的伪类选择器来写了，这次我们用一些平常不怎么用的选择属性

我们可以这样写，先看代码再分析
```
<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他伪类选择</title>
    <style>
        li:first-child{color: green;}
    </style>
</head>
<body>
    <ui>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ui>
</body>
</html>
```
这里我们使用:first-child选择li标签的第一个元素，让他变成绿色,注意了，他是始终选择第一行

我们看看效果：

这个时候，我们删掉第一行，此时第二行变成了第一行

此时，这个第一行仍然是绿色

那么有人就问了，可不可以让最后一个标签也始终有CSS的效果？当然可以！

我们使用:last-child可以达到这个效果，我这里就不做演示了，自己尝试

那既然这样也可以，又有人问了，我想让他其他行数保持属性呢？或者说我想让他单数行或者双数行改变属性呢？

当然，也可以实现，我们还要一个选择器——:nth-child()

这个选择器有一个（），这个括号是干嘛的？当然是填你要改变的行数的，比如,改变所有行数样式可以这样:nth-child(n)

改变第2行的颜色就是这样写：
```
li:nth-child(2){color: mediumvioletred;}
```
当然，既然括号里面可以指的数字，那我岂不是可以玩玩算法，我可以这样li:nth-child(2n)

还真没错，真可以，效果是这样的

那么，既然可以怎么玩，那么剩下的就自己研究吧！不过，其实选择单数双数有更简单的，不需要2n

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

所以，这样就可以：
```
:nth-child(odd)
:nth-child(even)
```
不多说，大家自己去多试试吧！

嘿嘿嘿！别以为就这样完了，我再说个让伪类选择更简单的选择

我们上面的选择都是直接选择,但是我们还有一种伪类选择，可以反选，什么是反选？就是除了我选中的，其余都执行CSS效果

这个选择器就是 li:not()，这个括号里面填需要排除的元素，比如我需要让除第一个元素，其他元素都变红色，我可以这样写
```
<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他伪类选择</title>
    <style>
        li:not(li:first-child){color: orangered;}
    </style>
</head>
<body>
    <ui>
        
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ui>
</body>
</html>
```
这样就选择了li标签中除了li:first-child的所有元素，效果是这样的：

最后，你有没有发现，我这个ui、标签里面全都是li标签，所以我每次都是选择li标签，但是我要是再里面加入其他标签，他也还是只改变li标签，比如这样：

这个CSS效果没有让第一个元素变色，也没有让第一个li标签变色，像这样的情况，我们就应该用另一个选择方式——:first-of-type

这个是直接选择父元素标签内指定标签的第一个元素，这样这个CSS效果就不会像上面那个一样失效

所以，有时候写代码，发现CSS失效，可以看看是不是这个原因

好了，伪类的选择器就讲到这，下次再说一说伪元素！
收起
展开全文
html 前端 html5
CSS 伪类实现的鼠标滑动图片链接
2020-09-05 22:45:09

CSS伪类实现的鼠标滑动链接，是一个图片导航，在早期的DW中有专一制作本效果的插件，不过随着大家CSS水平的提高，现在做出这种效果好像得心应手了，因为这种果大家应该都挺喜欢的。

收起
CSS控制链接显示状态的CSS伪类
2020-09-25 04:33:31

CSS控制元素的某种状态---伪类，如果在点击过后再返回到该页面还有一些效果的话就按照该顺序给链接添加状态，下面有个不错的示例，大家可以参考下

收起
CSS 伪类
2021-06-13 01:00:28

CSS 伪类(Pseudo-classes)CSS伪类是用来添加一些选择器的特殊效果。语法伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}anchor伪类在支持...

CSS 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。

语法

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

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

anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

实例

a:link{color:#FF0000;}/*未访问的链接*/a:visited{color:#00FF00;}/*已访问的链接*/a:hover{color:#FF00FF;}/*鼠标划过链接*/a:active{color:#0000FF;}/*已选中的链接*/

尝试一下 »

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

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

注意：伪类的名称不区分大小写。

伪类和CSS类

伪类可以与 CSS 类配合使用：

a.red:visited{color:#FF0000;}CSS语法

如果在上面的例子的链接已被访问，它会显示为红色。

CSS - :first - child伪类

您可以使用 :first-child 伪类来选择元素的第一个子元素

注意：在IE8的之前版本必须声明，这样 :first-child 才能生效。

匹配第一个

元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的

元素：

实例

p:first-child{color:blue;}

尝试一下 »

匹配所有

元素中的第一个元素

在下面的例子中，选择相匹配的所有

元素的第一个 元素：

实例

p>i:first-child{color:blue;}

尝试一下 »

匹配所有作为第一个子元素的

元素中的所有元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的

元素中的所有 元素：

实例

p:first-childi{color:blue;}

尝试一下 »

CSS - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则

注意：IE8必须声明才能支持;lang伪类。

在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：

实例

q:lang(no){quotes:"~" "~";}

尝试一下 »

更多实例

为超链接添加不同样式

这个例子演示了如何为超链接添加其他样式。

使用 :focus

这个例子演示了如何使用 :focus伪类。

所有CSS伪类/元素

选择器

示例

示例说明

input:checked

选择所有选中的表单元素

input:disabled

选择所有禁用的表单元素

p:empty

选择所有没有子元素的p元素

input:enabled

选择所有启用的表单元素

p:first-of-type

选择每个父元素是p元素的第一个p子元素

input:in-range

选择元素指定范围内的值

input:invalid

选择所有无效的元素

p:last-child

选择所有p元素的最后一个子元素

p:last-of-type

选择每个p元素是其母元素的最后一个p元素

:not(p)

选择所有p以外的元素

p:nth-child(2)

选择所有p元素的第二个子元素

p:nth-last-child(2)

选择所有p元素倒数的第二个子元素

p:nth-last-of-type(2)

选择所有p元素倒数的第二个为p的子元素

p:nth-of-type(2)

选择所有p元素第二个为p的子元素

p:only-of-type

选择所有仅有一个子元素为p的元素

p:only-child

选择所有仅有一个子元素的p元素

input:optional

选择没有"required"的元素属性

input:out-of-range

选择指定范围以外的值的元素属性

input:read-only

选择只读属性的元素属性

input:read-write

选择没有只读属性的元素属性

input:required

选择有"required"属性指定的元素属性

root

选择文档的根元素

#news:target

选择当前活动#news元素(点击URL包含锚的名字)

input:valid

选择所有有效值的属性

a:link

选择所有未访问链接

a:visited

选择所有访问过的链接

a:active

选择正在活动链接

a:hover

把鼠标放在链接上的状态

input:focus

选择元素输入后具有焦点

p:first-letter

选择每个

元素的第一个字母

p:first-line

选择每个

元素的第一行

p:first-child

选择器匹配属于任意元素的第一个子元素的元素

p:before

在每个

元素之前插入内容

p:after

在每个

元素之后插入内容

p:lang(it)

为

元素的lang属性选择一个开始值

收起

展开全文
CSS网页布局教程：CSS伪类定义3种方法
2020-09-27 17:59:28

网页制作Webjx文章简介：在CSS网页布局中，不可避免的会涉及到CSS伪类的问题。在CSS网页布局中，不可避免的会涉及到CSS伪类的问题。到底该如何正确的定义CSS伪类呢？虽然webjx中有很多相关的介绍，但复习一下也无妨...

收起
纯CSS3伪类实现icon标签效果
2020-06-12 08:02:22

以前我还是比较忽视这两个家伙的，今天第一次见到原来伪类的好处这么多，以后会多多推荐CSS3伪类实现的效果使用方法： 1、将head中的CSS样式引入到你的网页中 2、在你需要变成标签的html处增加class = ...

收起

HTML5
css中伪类:after的用法(三种方式)
2020-09-25 08:22:02

CSS中存在一些比较特殊的属性，称之为伪类,它们之中最常用的就是定义链接的伪:link，:visited，:hover，:active等本文详细介绍一下after的用法的用法，感兴趣的朋友可以了解下，或许对你有所帮助

收起
CSS伪类和伪元素的区别详解
2020-12-13 14:14:00

CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的...

收起
四种css 伪类选择器
2020-12-13 06:08:43

X:after Example Source Code ：.clearfix:after {content: “”;...:after伪类与content结合使用，用于往元素类追加内容。:after伪类还有个妙用：用于产生阴影，点击这里查看。X:hover Example S

收起
a标签的四个css伪类(link、visited、hover、active)样式理解
2020-11-30 20:19:44

伪类是CSS 用于向某些选择器添加特殊的效果。 a标签中有四个： link、visited、hover、active 未移入a标签链接时：link 移入a标签链接时：link、hover 点击a标签链接时：link、hober、active 点击后未移入a...

收起
css伪类与伪元素的区别
2021-03-29 13:55:36

css伪类与伪元素的区别1、伪类(pseudo-classes)2、伪元素(Pseudo-elements)3、伪类与伪元素的区别 1、伪类(pseudo-classes) 其核心就是用来选择DOM树之外的信息不能够被普通选择器选择的文档之外的元素，用来添加...

收起
css通过伪类来设置超链接样式附示例
2020-09-25 05:52:05

css设置超链接样式是通过伪类来实现的，默认状态下，创建的超级链接的文字颜色为蓝色，并带有下划线，访问之后变为紫色，下面有个不错的示例，喜欢的朋友可以尝试操作下

收起
CSS伪类与伪元素
万次阅读 多人点赞 2019-03-11 16:47:00

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的...

收起

伪元素
CSS伪类与CSS伪元素的区别及由来具体说明
2020-09-22 12:37:46

关于两者的区别，其实是很古老的问题.这里着重写的是为什么这两者不同，以及一些平时容易错过的细节,需要的朋友可以参考下

收起
pseudos:CSS 伪类列表
2021-07-03 21:42:05

CSS 伪类（选择器）列表。使用安装 npm i pseudos --save 用法默认情况下导出所有和。 var pseudos = require ( 'pseudos' ) ; //=> ['after', 'before', ...] 选择器级别 4 伪代码暴露在.css4属性上： var ...

收起

JavaScript
css伪类-小圆点
千次阅读 2021-03-12 18:16:55

项目需求：在每个单元格的前面加一个小圆点，效果图如下：搜了一大堆文章，加小圆点的方法无非就是设置width、... // 此句为css样式展示重点 width: 3px; height: 3px; border-radius: 50%; margin-right: 12px; } }

收起