理解 CSS（1） | 青训营笔记这是我参与「第五届青训营」笔记创作活动的第2天一、本堂课重点内容： CSS 中的一

这是我参与「第五届青训营」笔记创作活动的第2天 截屏2023-01-30 下午3.59.02.png

CSS 中的一些基础概念

外链（link标签，推荐使用）、嵌入、内联（把标签样式直接写入style中）

截屏2023-01-30 下午4.04.35.png

使用多种方式选择元素，找出页面中的元素，以便给他们设置样式

不基于标签和属性定位元素

伪类大致分为：状态伪类和结构性伪类

状态伪类：根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式。当我们修改一个链接的样式时我们需要定位（针对） <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用 CSS 去定位或者说针对这些不同的状态进行修饰——下面的 CSS 代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。

a:link {
  color: pink;
}

a:visited {
  color: green;
}

Copy to ClipboardCopy to Clipboard

结构性伪类：某些内容根据它在文档中的位置而有所不同在我们的文档中有两个 <em>元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<li> 元素内的<em>我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。

将以下规则添加到样式表。

li em {
  color: rebeccapurple;
}

Copy to ClipboardCopy to Clipboard

该选择器将选择<li>内部的任何<em>元素（<li>的后代）。因此在示例文档中，您应该发现第三个列表项内的<em>现在是紫色，但是在段落内的那个没发生变化。

另一些可能想尝试的事情是在 HTML 文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符)

也将这个规则添加到样式表中：

h1 + p {
  font-size: 200%;
}

Copy to ClipboardCopy to Clipboard

下面的示例包含了上面的两个规则。尝试添加规则使位于段落中的 span 变为红色。如果没问题，您将看到在第一段中的 span 会变为红色，但是第一个列表项中的 span 不会改变颜色

截屏2023-01-30 下午4.44.43.png