一、伪类

1、anchor伪类

1.1 anchor伪类

​ 作用：给链接的不同状态设置样式

1.2 anchor伪类的种类

a:link {color:#FF0000;}  /* 未访问时的链接状态 */
a:visited {color:#00FF00;}  /* 已访问的链接状态 */
a:hover {color:#FF00FF;}    /* 鼠标覆盖链接状态 */
a:active {color:#0000FF;}   /* 已选中的链接状态（点击时跳转前的样式） */

1.3 使用时的注意事项

• CSS固有的定义中
  • a:hover必须在a:link和a:visited之后
  • a:active必须置于a:hover之后
  • 伪类的名称不分大小

2、搭配使用

2.1 结合CSS类配合使用

//html
<div><a class="red" href="链接" target="_blank">这是一个链接</a>
</div>//CSS
a.red:visited{color: brown;
}

2.2 搭配元素使用

2.2.1任何元素的第一个子元素 p 元素

p:first-child
{color:blue;
}

2.2.2 所有p元素的第一个 i 元素

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

2.2.3 第一个子元素p元素中所有的i元素

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

3、所有的伪类（W3school上的汇总）

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 input元素。
:disabled	input:disabled	选择每个被禁用的 input 元素。
:empty	p:empty	选择没有子元素的每个 p元素。
:enabled	input:enabled	选择每个已启用的 input 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 p 元素。
:first-of-type	p:first-of-type	选择作为其父的首个p 元素的每个 p元素。
:focus	input:focus	选择获得焦点的 input 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 input元素。
:invalid	input:invalid	选择所有具有无效值的 input元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 p 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个p 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个p 元素的每个 p 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非 p 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个p 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个p 元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个p 元素的每个p 元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个p 元素的每个p 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 p 元素的每个 p 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 p 元素。
:optional	input:optional	选择不带 “required” 属性的 input元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 input元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的 input 元素。
:read-write	input:read-write	选择不带 “readonly” 属性的 input 元素。
:required	input:required	选择指定了 “required” 属性的 input 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 input 元素。
:visited	a:visited	选择所有已访问的链接。

二、伪元素

CSS伪元素作用：设置元素指定部分的样式

1、伪元素举例

1.1 ::first-line伪元素----为文本首行添加样式

1.1.1 书写方式

标签元素名称::first-line{需要设置的样式
}

1.1.2 ::first-line使用的属性

• ::first-line伪元素只能应用于块级元素

• 使用其的属性

  • 字体、颜色、背景

  • word-spacing----指定字之间的空间，—30像素

    p{word-spacing:30px;
    }
    

  • letter-spacing----元素字母之间的间距

    h1 {letter-spacing:2px
    }
    

  • text-decoration----添加到文本的修饰，下划线、上划线、删除线等

    h1 {text-decoration: none;/*没有文本装饰*/}
    h2 {text-decoration: underline red;/*红色下划线*/}
    h3 {text-decoration: underline wavy red;/*红色波浪形下划线*/}等等
    

  • vertical-align----元素的垂直对齐方式

  • text-transform----转换不同元素中的文本

  • line-height

  • clear----指定段落的左侧或右侧不允许浮动的元素

    img
    {float:left;
    }
    p.clear
    {clear:both;
    }
    

1.2 ::first-letter伪元素----为文本首字母添加样式

1.2.1 书写方式

标签元素名称::first-letter{需要设置的样式
}

1.2.2 ::first-letter使用的属性

• ::first-letter 伪元素只适用于块级元素。
• 使用其的属性
  • 字体、颜色、背景
  • 外边距、内边距、边框
  • text-decoration
  • vertical-align（仅当 “float” 为 “none”）
  • text-transform
  • line-height
  • float
  • clear

1.3 ::before伪元素----在元素内容之前添加内容

h1::before {content: url(smiley.gif);
}

1.4 ::after伪元素----在元素内容之后添加内容

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

1.5 ::selection元素----用户鼠标选中文本添加样式

::selection {color: red; background: yellow;
}

2、 伪元素结合CSS使用

//和伪类一样，直接标签后跟着选择器
p.intro::first-letter {color: #ff0000;font-size: 200%;
}

3、所有的伪元素（W3school上的汇总）

选择器	例子	例子描述
::after	p::after	在每个p 元素之后插入内容。
::before	p::before	在每个p 元素之前插入内容。
::first-letter	p::first-letter	选择每个 p 元素的首字母。
::first-line	p::first-line	选择每个p 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

三、伪类和伪元素的区别

• 在CSS2和CSS1中，伪类和伪元素都使用了单冒号语法。（为了接收后面兼容，CSS2和CSS1接收单冒号）
• 在CSS3中，双冒号取代了伪元素的单冒号标签。（原因：区别伪类和伪元素，在CSS3中伪类使用单冒号，伪元素使用双冒号）

伪类---伪元素知识汇总相关推荐

1. 学习笔记（10）伪类伪元素

   目录 1,伪类 2,伪元素 3,伪类伪元素的区别 3.1,相同点 3.2,不同点 1,伪类 w3c的定义:CSS伪类是用来添加一些选择器的特殊效果. 伪类是指原本存在的标签,在满足某些条件的情况下,就 ...

2. 【web】伪类伪元素

   伪类伪元素 伪类选择器 可以理解为描述元素的某种状态 常用伪类 a标签的4种伪类(要按顺序书写:link.visited.hover.active) :link:元素链接点击前的样式 :visited ...

3. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

    水平&垂直对齐 元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...

4. 伪类 伪元素 如何区分

   前段时间在写网页的时候,使用了CSS的伪元素:after来实现样式,故而重温了一下伪类和伪元素.平时实现的时候便是拿出来用,但是真正区分两者的概念的时候却有点混淆了. 首先,查看一下W3S对伪类和伪元 ...

5. CSS：基本概念、选择器、伪类伪元素

   基本概念 HTML使用结构化标记的理由:易于建立内容索引.增加文档可用性.增加可访问性.易于维护.  元素(element):文档结构的基础,每个元素生成一个框(box)其中包含元素的内容, 元素的两 ...

6. 自学前端第十五天:伪类伪元素和属性选择器和精灵图

   #一.基础伪类选择器(也是交集选择器一种,优先级也要叠加) 1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已 2.作用:伪类选择器用于向某些选择器添加特殊的效果 ...

7. HTML5 CSS3提高 11-01 新增标签及属性 表单 多媒体 结构伪类 伪元素 过渡 小米log jd进度条

   HTML5新特性 1.语义化标签 (★★) <header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档 ...

8. css样式（二）（伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器 ）

   一.rgb值: RGBA 颜色RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox 3+.Chrome.Safari 以及 Opera 10+.RGBA 颜色值是 RGB 颜色值的扩展,带有 ...

9. CSS样式中伪类和伪类元素的区别（css中一个冒号和两个冒号的区别）

   首先介绍下什么是伪类,所谓伪类就是: 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于 状态是动态变化的,所以一个元素达到一个特 ...

最新文章

1. excel定义函数操作文档
2. android helloworld程序
3. 7个HTML你可能不知道的使用技巧
4. 很认真地聊一聊程序员的自我修养
5. php对象魔术方法,php学习之类与对象的魔术方法的使用
6. 笔记10：时时屏幕抓取小程序
7. leetcode: 451. Sort Characters By Frequency
8. python 帮助 autocad_python 使用pyautocad操作AutoCAD
9. 怎么样才显示暗=安装好了mysql_linux mysql安装
10. graSSHopper：一个不错的开源SSH工具
11. 计算机进管理提示找不到入口,如何解决Win10提示找不到入口点dllregisterserver
12. 抖音巨量百应怎么发福袋?四川鹰迪
13. 线性代数（1）：行列式和展开式
14. PHP中explode和implode的区别
15. 云计算学习笔记1——并行计算
16. CS硕士妹子找工作经历【阿里人搜等互联网公司】
17. 三、HTML5之文本元素
18. 常见的中成药神奇疗效
19. 【面试题】755- 104道 CSS 面试题，助你查漏补缺（上）
20. Git 简单使用教程

热门文章

1. IF：伴FLT3-ITD突变的急性髓系白血病在米哚妥林治疗下的克隆进化
2. Clickhouse 空缺值处理
3. 轻质原油和重质原油如何区分？
4. sqlserver创建表命令create table
5. 辅助驾驶功能开发-功能对标篇(18)-NCA城市辅助系统-华为
6. 深入浅出 Swift 中的 some、any 关键字以及主关联类型（primary associated types）
7. c++利用mutex（互斥量）实现多线程
8. sendmail使用
9. 从excel表格中批量给图片重命名
10. 2021-2027全球与中国横向健身器材市场现状及未来发展趋势