htmlCss----Day9(css选择器）

最新推荐文章于 2025-07-31 20:51:23 发布

頑張ってちしじょ

最新推荐文章于 2025-07-31 20:51:23 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_45170547/article/details/103011359

本文深入讲解CSS（层叠样式表）的基本概念与使用技巧，包括样式表如何定义HTML元素的显示方式，解决内容与表现分离的问题，以及各种选择器如派生、后代、子元素、相邻兄弟、id、类和属性选择器的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Css概述

css指层叠样式表（Cascading Style Sheets)
样式的定义***如何显示html元素***
样式通常存储在样式表中
把样式添加到HTML4.0中，是***为了解决内容与表现分离的问题***
外部样式表可以极大提高工作效率
外部样式表通常存储在CS文件中
多个样式定义可层叠为一。

派生选择器

后代选择器
子元素选择器：>(大于号）
- 语法：h1>strong
相邻兄弟选择器：+（加号）
- 语法：p+h1
- 必须是紧跟在另一元素后的元素，而且两者拥有相同的父元素。

id选择器

允许一种独立于文档元素的方式来指定样式。

类选择器

类名的第一个字符不能使用数字。

属性选择器

例如：

<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

<hr />

<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>

在这里插入图片描述