第四篇 HTML5 伪类与伪元素

_语义错误

已于 2022-02-02 16:11:33 修改

阅读量4k

点赞数 9

文章标签： css css3 html

于 2022-01-27 21:31:44 首次发布

本文链接：https://blog.csdn.net/m0_66451927/article/details/122717867

版权

一、伪类

1、概念：

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

1.1、first-child伪类

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

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

看看下面的例子

代码：

<!DOCTYPE html>
<html lang="en">
<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>
        h4:first-child{color: olivedrab;}
    </style>
</head>
<body>
    <h4>我是html父标签的第一个元素，且为h4标签，所以我是变绿了</h4>
    <h4>我是html标签的第二个元素，所以我不变色</h4>
    <hr>
    <div>
        <h4>我是第一个div标签里的第一个元素，且为h4标签，所以我变绿了</h4>
        <h4>我是第一个div标签里的第二个h4标签内容，所以我不变色</h4>
    </div>
    <hr>
    <div> 
        <p>我是第二个div标签里的第一个元素，但是我是p标签，所以我不变色</p>
        <h4>我是第二个div标签里的第一个h4标签，但我不是div的第一个元素，所以我不变色</h4>
       
    </div>
    
</body>
</html>

运行结果：

代码解析：

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

（2）div标签

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

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

1.2、超链接伪类

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

代码：

<!DOCTYPE html>
<html lang="en">
<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:black;
        }
       /* 已访问的链接，显示灰色*/
       a:visited {
           color:gray;
        }
       /* 鼠标悬停链接，显示绿色 */
       a:hover {
           color:olivedrab;
        }
       /* 已选择的链接，显示橙色 */
       a:active {
           color:orange;
        }
    </style>
</head>
<body>
    <a href="http://csdn.com">我是链接一</a>
    <br>
    <a href="http://www.w3school.com">我是链接二</a>
</body>
</html>

运行结果：

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

访问过后，链接显示灰色

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

代码解析：

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

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

1.3、CSS类和伪类

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

代码：

<!DOCTYPE html>
<html lang="en">
<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>CSS类和伪类配合使用</title>
    <style>
        .highlight{
            color: #ff0000;
        }
    </style>
</head>
<body>
    <h4 class="highlight">我使用了类样式，所以生效了</h4>
    <h4 >我没有使用类样式，所以不生效</h4>
</body>
</html>

运行结果：

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

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

代码：

<!DOCTYPE html>
<html lang="en">
<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>CSS类和伪类配合使用</title>
    <style>
        h4.highlight:first-child{
            color: #ff0000;
        }
    </style>
</head>
<body>
    <h4 class="highlight">我使用了指定类对某标签生效，所以生效了</h4>
    <h4 >我没有使用指定类对某标签生效，所以不生效</h4>
</body>
</html>

运行结果：

代码解析：

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

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

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

1.4、其他伪类

通过三个例子了解：

代码：

<!DOCTYPE html>
<html lang="en">
<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>
        ul li:first-child{color:green;}
        p a:last-child{color:hotpink;}
        div p span:first-child{color:yellow}
    </style>
</head>
<body>
    <b>例子一：</b>
    <ul>
        <li>第一项值</li>
        <li>第二项值</li>
        <li>第三项值</li>
    </ul>
    <ul>
        <li>第一项值</li>
        <li>第二项值</li>
        <li>第三项值</li>
    </ul>
    <hr>
    <b>例子二：</b>
    <p>我是p标签</p>
    <p>
        我是 p 元素内容
        <br>
        <a href="http://www.csdn.com">这是 p 元素下的 a 标签1</a>
        <br>
        <a href="http://www.baidu.com">这是 p 元素下的 a 标签2</a>
        <br>
        <a href="http://www.taobao.com">这是 p 元素下的 a 标签3</a>
    </p>
    <hr>
    <b>例子三：</b>
    <div>
        <p>
            p1内容
            <span>span内容1</span>
            <span>span内容2</span>
            p1内容
        </p>
        <p>
            p2内容
            <span>span内容3</span>
            p2内容
        </p>
    </div>
</body>
</html>

运行结果：

代码解析：

定义了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 属性 | 菜鸟教程

CSS中伪对象详解

:first-line 伪对象

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

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

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

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

代码：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        p::first-line{color:blue;font-size:20px;}
    </style>
</head>
<body>
    <!--first-line伪对象-->
    <p>
        我是p1第一行<br>
        我是p1第二行<br>
        我是p1第三行<br>
    </p>
    <p>我是p2第一行阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长</p>

    
</body>
</html>

运行结果：

代码解析：

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

:first-letter伪对象

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

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

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

:before伪对象

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

:after伪对象

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

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

代码：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        p::first-line{color:blue;font-size:20px;}
        P::first-letter{color:brown}
        P::before{
            content:"我是前方增加的文字--你好，";
            color:darkgreen
        }
        P::after{
            content:" 虎年大吉--我是后面增加的文字";
            color: fuchsia;
            
        }
    </style>
</head>
<body>
    <p>2022</p>
    <p>
       2022<br>
       2022<br>
       2022<br>
    </p>
    <p>我是p2第一行阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长我是阿长</p>
    
</body>
</html>

运行结果：

代码解析：

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

拓张资料：

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

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

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

_语义错误

关注

9
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
第四篇 HTML5 伪类与伪元素

一、伪类1、概念：CSS伪类（Pseudo-classes）用于定义元素的特殊状态，用来添加一些选择器的特殊效果。下面我们分四种了解伪类，分别是first-child伪类、超链接伪类、CSS类和伪类、其他伪类。1.1、first-child伪类概念：first-child 伪类来选择父元素的第一个子元素，选择器匹配作为任何元素的第一个子元素的 <p> 元素。语法：子元素（选择器）+ 空格 +first-child + {定义的样式}；看看下面的例子...
复制链接

扫一扫