HTML 结构与CSS 样式详解
HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS 样式直接定义在 <head> 中的 <style> 标签内 -->
<style>
div {
color: rgba(255, 0, 0, 0.5); /* 红色，半透明 */
font-size: 16px; /* 设置字体大小 */
font-weight: 900; /* 字体加粗 */
font-family: "华文彩云"; /* 设置字体 */
}
.sss {
color: antiquewhite; /* 应用于class="sss"的元素 */
}
#wzh {
color: blueviolet; /* 应用于id="wzh"的元素 */
}
/* 此部分代码实际无效，但意图展示如何错误使用通配符选择器 */
div* {
color: aquamarine;
}
</style>
</head>
<body>
<!-- 使用不同选择器的div元素 -->
<div>世间不该有此人</div>
<div class="sss">世间不该有此人</div>
<div id="wzh">世间不该有此人</div>
<div>世间不该有此人</div>
</body>
</html>
核心概念解析
-
标签选择器：
- 应用于所有
<div>标签。在这个示例中，所有<div>元素默认为半透明的红色文字。
- 应用于所有
-
类选择器：
.sss类应用于第二个<div>元素，覆盖默认的红色文字颜色，改为antiquewhite。
-
ID选择器：
#wzh唯一标识应用于第三个<div>，将文字颜色改为blueviolet。
-
通配符选择器：
- 尝试使用
div*选择器是无效的，并且在CSS中不是一个合法的表达式。正确的通配符选择器应为*，它应用于所有元素，但在这段代码中的使用是错误的。
- 尝试使用
-
优先级：
- CSS优先级从高到低依次是：内联样式、ID选择器、类选择器、标签选择器、通配符选择器。在代码中展示了通过ID、类和标签选择器来覆盖通配符和其他选择器的样式。
实际应用
在Web开发中，理解和正确使用CSS选择器对于构建有效和可维护的样式表至关重要。通过选择器，开发者可以精确控制哪些元素应该应用特定的样式，如何有效地覆盖某些样式，以及如何最大限度地利用CSS的层叠特性。
希望这篇文章能帮助您更好地理解和应用CSS选择器以及如何在网页设计中有效使用它们。不断实践和探索更复杂的选择器和样式将是提升前端开发技能的关键。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
