第四篇 HTML5 伪类与伪元素

目录

一、伪类

1、概念：

1.1、first-child伪类

1.2、超链接伪类

1.3、CSS类和伪类

1.4、其他伪类

二、伪元素

CSS中伪对象详解

:first-line 伪对象

:first-letter伪对象

:before伪对象

:after伪对象

        CSS伪类（Pseudo-classes）用于定义元素的特殊状态，用来添加一些选择器的特殊效果。下面我们分四种了解伪类，分别是first-child伪类、超链接伪类、CSS类和伪类、其他伪类。

概念：first-child 伪类来选择父元素的第一个子元素，选择器匹配作为任何元素的第一个子元素的

元素。

语法：子元素（选择器）+ 空格 +  first-child +  {定义的样式}；

看看下面的例子

代码：

我是第二个div标签里的第一个元素，但是我是p标签，所以我不变色

运行结果：

代码解析：

（1）通过观察代码得知first-child伪类是放在sytle标签里的，再看看运行结果的“自述”，我们可以得出结论：first-child伪类的实现，需要满足2个条件，条件1是子元素必须是first-child规定的元素，条件2是子元素必须是父元素的第一个（first）元素，只有2个条件同时满足，first-child伪类便会实现。

（2）div标签

         标签定义 HTML 文档中的一个分隔区块或者一个区域部分。标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。 元素经常与 CSS 一起使用，用来布局网页。

         例如百度页面中有很不同的内容，有导航栏、logo标题、推荐内容、百度热搜等，这些不同区域的内容都可以使用 div 分隔，再使用 css 样式对其进行排版，使其在页面中“摆放”在不同位置。div 间的关系有并列有嵌套，嵌套可以一套一也可以一套多。

        在支持 CSS 的浏览器中，用超链接伪类实现链接的不同状态以不同的方式显示，例如设置超链接未被访问时的颜色、已访问时的颜色、鼠标滑过时的颜色、选中后的颜色。未访问颜色的设置使用 link 伪类、已访问使用visited、鼠标滑过使用hover、已选中使用active。

代码：

运行结果：

未访问时，两个链接都是黑色

访问过后，链接显示灰色

 鼠标悬停时，链接字体变绿色，点击时变橙色（一闪而过）

代码解析：

        未访问链接字体颜色命名为 link 、已访问链接字体颜色命名为visited、鼠标滑过时链接字体颜色命名为hover、已选中链接字体颜色命名为active，对链接进行不同操作，显示不同颜色。

        使用超链接伪类使得制作出来的页面更加精美，需要注意 hover 必须写再 link 和 visited 之后，active 必须放在 hover 之后，否则无法生效。

结合之前学过二点CSS类，伪类可以与 CSS 类配合使用。

代码：

运行结果：

代码解析：当元素h4调用CSS类highlight时，样式生效，如果使用伪类就不需要调用，伪类是提前定义好的。

还可以直接使用类名进行调用

代码：

运行结果：

代码解析：

上面的代码使用了指定类对某标签生效，体现在

h4.highlight:first-child{             color: #ff0000;         }

就是再伪类基础h4.:first-child加个类名h4.highlight:first-child,调用时和类一样用类名。

通过三个例子了解：

代码：

我是p标签

我是 p 元素内容 这是 p 元素下的 a 标签1 这是 p 元素下的 a 标签2 这是 p 元素下的 a 标签3

p1内容 span内容1 span内容2 p1内容

p2内容 span内容3 p2内容

运行结果：

代码解析：

定义了3种伪类，分别是ul li:first-child{color:green;}、 p a:last-child{color:hotpink;}和div p span:first-child{color:yellow;}，其中：

first-child------表示父元素指定的第一个子元素，前面介绍过了。

last-child------表示父元素指定的最后一个子元素，语法格式和first-child一样都是 父元素+空格+子元素

ul li:first-child{color:green;}--------表示ul标签里的第一个元素是li标签时，li标签使用该样式。

p a:last-child{color:hotpink;}-------表示p标签里的第一个元素是a标签时，a标签使用该样式。

div p span:first-child{color:yellow;}-表示div标签里的第一个元素是lp标签,并且p标签的第一个元素是span标签时，span标签使用该样式。

概念：参考自：百度百科

        CSS 伪元素用于设置元素指定部分的样式。伪对象语言创造的元素不存在在DOM文档中，是虚拟的元素。伪元素代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

        伪对象用于将特殊的效果添加到某些选择器。

语法规制为：选择器 :: 伪元素{属性：值} 

CSS中的伪对象如下表：

伪元素

说明

:after

与content属性一起使用，定义在对象后的内容

:before

与content属性一起使用，定义在对象前的内容

:first-letter

定义对象内第一个字符的样式

:first-line

定义对象内第一行的样式

content 就是文本属性，与:before 及 :after 伪元素配合使用，来插入生成内容。 

content的其他用法可以参考：CSS content 属性 | 菜鸟教程

" first-line"伪元素用于向某个选择器中的文字的首行添加特殊样式。

first-line伪元素仅能被用于块级元素。下面的属性可以被应用到first-line伪元素：

font 属性、color属性、background属性、word-spacing（词间距）、letter-spacing（字母间距）、text-decoration（文本修饰）、vertical-align（垂直对齐）、text-transform（文本转换）、line-height（行高）。

让我们举个例子更好理解。

代码：

我是p1第一行 我是p1第二行 我是p1第三行

我是p2第一行阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长

运行结果：

 代码解析：

first-line在上面的例子中，浏览器显示根据first-line伪元素格式化的第一行。浏览器是依靠浏览器窗口的尺寸来进行分行的。

first- letter伪元素用于向某个选择器中的文本的首字母添加特殊的样式：

下面的属性可以被应用到first-letter伪元素：

font 属性、color属性、background属性、margin页边缘属性、padding填充属性、border边界属性、text-decoration、vertical-align、text-transform、line-height。

before伪元素可用于在某个元素之前插入某些内容。

after伪类可用于在某个元素之后插入某些内容。

让我们来个综合上面四个伪对象的例子理解一下

代码：

2022

2022 2022 2022

我是p2第一行阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长

运行结果：

代码解析：

在原本P元素的内容前都加了“我是前方的文字--你好，”在原本P元素的内容后都加了“虎年大吉--我是后面的文字”，P元素的第一行都变成蓝色，P元素的第一个字母都变成红色。

拓张资料：

（1）DOM文档：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

DOM 定义了访问 HTML 和 XML 文档的标准：

（2）文档树：这里指的是HTML DOM 节点树，HTML的结构是一个树状结构，在内存中形成一棵树，因此叫文档树。