CSS：基本语法及派生选择器

最新推荐文章于 2022-10-24 08:06:32 发布

books1958

最新推荐文章于 2022-10-24 08:06:32 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css/javascript 文章标签： html css

本文链接：https://blog.youkuaiyun.com/books1958/article/details/41700077

html/css/javascript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了CSS的基础语法，包括如何为不同级别的标题设置颜色和背景色，并演示了派生选择器的作用方式。此外，还详细解释了当多个样式规则同时应用于同一元素时，如何解决样式冲突的问题。

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

本文介绍css基本语法及派生选择器。

代码整理自w3school：http://www.w3school.com.cn

(一)基础部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<head>
<style type="text/css">
h1,h2,h3 {color:red;background-color:#ccc}
li strong {font-style:italic;}
</style>
</head>

<title>CSS基础</title>

<body>
  <h1>h1,h2,h3 级标题为CSS样式指定为灰底红字<h1>
  <h2>h1,h2,h3 级标题为CSS样式指定为灰底红字<h2>
  <h3>h1,h2,h3 级标题为CSS样式指定为灰底红字<h3>
  <h4>h4级标题没有被指定样式<h3>

  <hr/>
  <!--派生选择器-->
  <h4>派生选择器允许你根据文档的上下文关系来确定某个标签的样式。</p>
  <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
  <ol>
    <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
    <li>我是正常的字体。</li>
  </ol>

</body>
</html>

效果图：

（二）样式的“覆盖”规则

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<head>
  <style type="text/css">
    strong {color: red;}
    h2 {color: red;}
    h2 strong {color: blue;}
  </style>
</head>

<title>CSS基础-样式的“覆盖”规则</title>

<body>
  <p>The strongly emphasized word in this paragraph is <strong>red</strong>.</p>
  <h2>This subhead is also red.</h2>
  <h2>The strongly emphasized word in this subhead is <strong>blue</strong>.</h2>
</body>

</html>

效果图：