青少年编程与数学 01-006 设计网页的外观 15课题、伪类

明月看潮生

于 2024-07-15 07:03:02 发布

阅读量323

点赞数 11

分类专栏： # 编程与数学第01阶段文章标签：青少年编程 css 前端编程与数学

本文链接：https://blog.csdn.net/qq_40071585/article/details/140428218

版权

编程与数学第01阶段专栏收录该内容

118 篇文章 0 订阅

订阅专栏

青少年编程与数学 01-006 设计网页的外观 15课题、伪类

课题摘要
课题要求
一、CSS 伪类
二、锚伪类
三、伪类和 CSS 类
四、CSS - :first-child 伪类
五、CSS - :lang 伪类
六、所有 CSS 伪类
七、练习
课题作业
附录一、人物介绍：乔丹·沃尔克

介绍如何使用伪类设计元素样式。

“你不能改变风向，但你可以调整自己的帆，以到达目的地。”
“You can’t change the wind, but you can adjust your sails to always reach your destination.”
—— 詹姆斯·戴恩 (James Dean) | 美国演员 | 1931 ~ 1955

“你无法控制结果，但你可以控制自己的状态。”
“You can’t control the outcome, but you can control your state.”
—— 尼克·博利奥斯 (Nick Bollettieri) | 美国网球教练 | 1931 ~ 至今

“一个积极的心态是所有成功状态的起点。”
“A positive mental attitude is the starting point of all achievement.”
—— 诺曼·文森特·皮尔 (Norman Vincent Peale) | 美国牧师、作家 | 1898 ~ 1993

课题摘要

介绍如何使用伪类设计元素样式。

课题要求

掌握使用伪类设计元素样式的方法。

一、CSS 伪类

什么是伪类？伪类用于定义元素的特殊状态。
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
请将鼠标悬停在我上面
单击我来获取焦点
伪类的语法：

selector:pseudo-class {
  property: value;
}

二、锚伪类

链接能够以不同的方式显示：

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

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

三、伪类和 CSS 类

伪类可以与 CSS 类结合使用：
当您将鼠标悬停在例子中的链接上时，它会改变颜色：

a.highlight:hover {
  color: #ff0000;
}

悬停在 <div> 上
在 <div> 元素上使用 :hover 伪类的实例：

div:hover {
  background-color: blue;
}

简单的工具提示悬停
把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果）：
悬停到我上面来显示 <p> 元素。

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

四、CSS - :first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
匹配首个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何 <p> 元素：

p:first-child {
  color: blue;
}

匹配所有 <p> 元素中的首个 <i> 元素
在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：

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

匹配所有首个 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配作为另一个元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

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

五、CSS - :lang 伪类

:lang 伪类允许您为不同的语言定义特殊的规则。
在下面的例子中，:lang 为属性为 lang=“en” 的 <q> 元素定义引号：

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

六、所有 CSS 伪类

选择器	例子	例子描述
: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)	选择每个非 <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中用于增加选择器的特定性，它们允许你根据特定状态来设置元素的样式。以下是一些常见的伪类以及一个示例网页，演示如何使用它们来设置元素的样式：

:hover - 当鼠标悬停在元素上时。
:focus - 当元素获得焦点时。
:active - 当元素被激活（如被点击）时。
:nth-child() - 选择属于其父元素的特定子元素。
:first-child - 选择作为其父元素的第一个子元素的元素。
:last-child - 选择作为其父元素的最后一个子元素的元素。
:not() - 选择不符合其参数选择器的元素。

示例网页的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pseudo-classes Example</title>
    <style>
        /* 基础样式 */
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 8px;
            background-color: #f0f0f0;
            transition: background-color 0.3s;
        }

        /* 伪类样式 */
        li:hover {
            background-color: #d4d4d4;
        }

        li:focus {
            background-color: #c8e4fa;
        }

        li:active {
            background-color: #b0c4de;
        }

        /* 选择第一个子元素 */
        li:first-child {
            font-weight: bold;
        }

        /* 选择最后一个子元素 */
        li:last-child {
            color: red;
        }

        /* 选择偶数位置的子元素 */
        li:nth-child(even) {
            background-color: #e8e8e8;
        }

        /* 选择不是第一个或最后一个的子元素 */
        li:not(:first-child):not(:last-child) {
            border-left: 2px solid #ddd;
        }
    </style>
</head>
<body>

    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
        <li>列表项 4</li>
        <li>列表项 5</li>
    </ul>

</body>
</html>

在这个示例中，我们为<ul>和<li>元素设置了基础样式，然后使用伪类来改变鼠标悬停、获得焦点和被点击时的样式。此外，还使用了:first-child、:last-child、:nth-child()和:not()伪类来选择特定的列表项并应用样式。这个示例展示了伪类如何增强网页的交互性和视觉反馈。

课题作业

完成代码练习。

附录一、人物介绍：乔丹·沃尔克

乔丹·沃尔克（Jordan Walke）是知名的软件工程师，以其在Facebook的工作和对React Native框架的贡献而闻名。以下是关于他的一些重要信息：

早年生活：乔丹·沃尔克的具体出生信息没有公开记录，但他在软件工程领域的工作让他成为了一个知名的人物。
教育背景：关于乔丹·沃尔克的教育背景，目前没有详细的公开信息。
职业生涯：
- 乔丹·沃尔克在Facebook担任软件工程师期间，参与了多个重要项目。
- 他是React Native框架的创始工程师之一，这是一个允许开发者使用JavaScript和React来开发原生移动应用的框架。
技术贡献：
- 作为React Native的关键贡献者，沃尔克帮助推动了移动开发领域的发展，使得开发者能够更高效地构建跨平台的移动应用。
个人生活：关于乔丹·沃尔克的个人生活，公开信息较少，他似乎更倾向于让工作成就代表自己。
当前状态：目前，关于乔丹·沃尔克的最新消息和活动，公开信息有限。