6、CSS 基础概念与实用技巧全解析

c6d7e8f9g

于 2025-09-12 09:38:08 发布

阅读量12

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS艺术：从理论到实践文章标签： CSS 上下文选择器 CSS注释

本文链接：https://blog.csdn.net/c6d7e8f9g/article/details/153253719

CSS艺术：从理论到实践专栏收录该内容

38 篇文章 ¥69.90 ¥499.90 限时 7 天

订阅专栏

超级会员免费看

CSS 基础概念与实用技巧全解析

1. 上下文选择器

上下文选择器是 CSS 的一个基本概念，它允许 Web 浏览器根据特定 CSS 属性在网页上出现的上下文，有选择地应用 CSS 格式规则。例如，当网页上有嵌套的无序列表时，我们可以通过上下文选择器让主列表和子列表呈现不同的样式。

1.1 示例代码

<HTML>
<HEAD>
<TITLE>Contextual selectors</TITLE>
<STYLE>
UL LI {FONT-SIZE: X-LARGE; COLOR: BLACK;}
UL UL LI {FONT-SIZE: LARGE; COLOR: GRAY;}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>An extra-large list item in a black font
<UL>
<LI>A large sub-list item in a grey font
<LI>Another large sub-list item in a grey font
</UL>
<LI>Another extra-large list item in a black font
</UL>
</BODY>
</HTML>

在这个例子中，主列表项的字体为超大号黑色，子列表项的字体为大号灰色。