CSS选择器详解：从复合到伪类，及元素显示模式

该文件主要介绍了Web前端开发中CSS选择器的使用，包括复合选择器、元素显示模式以及背景属性。 1. 复合选择器 - **后代选择器**：通过空格分隔，选择器1表示父元素，选择器2表示后代元素，用于选择指定父元素的所有后代元素，例如 `div p` 会选择所有在div内的段落。 - **子元素选择器**：使用 `>` 分隔，如 `div > p` 只会选择div的直接子元素p，不包括后代。 - **并集选择器**：通过逗号分隔，如 `div, p` 选择所有的div和p元素，用于一次性定义相同样式。 - **交集选择器**：如 `div p` 会选择既是div又是p的元素，但因为HTML中不存在这样的情况，所以实际应用较少。 - **伪类选择器**：针对链接的特殊状态，如 `a:link`（未访问链接），`:visited`（已访问链接），`:hover`（鼠标悬停），`:active`（活动链接），注意LVHA顺序。 - **焦点选择器**：如 `input:focus` 选择获得焦点的输入元素。 2. CSS的元素显示模式 - **块级元素**（如div、p、h1-h6等）：独占一行，宽度、高度、内外边距可控，能容纳行内或块级元素，通常用于构建布局。 - **行内元素**（如a、strong、b等）：同行显示，宽度高度不可直接设置，只能容纳文本或行内元素。 - **行内块元素**（如img、input、td）：结合行内元素和块级元素特性，可以同行显示但具有块级元素的宽高控制。 3. CSS的背景属性 - **背景颜色**：`background-color` 设置元素背景颜色，可透明或指定颜色。 - **背景图片**：`background-image` 加载背景图片，通过url指定路径。 - **背景平铺**：`background-repeat` 控制图片是否平铺及平铺方式。 - **背景位置**：`background-position` 定义图片相对于元素的位置，可以使用方位名词或精确单位。 - **背景固定**：`background-attachment` 选择背景是否随滚动固定。 - **背景复合写法**：将背景颜色、图片、平铺、位置等合并写入一个声明，顺序不固定。 - **背景色半透明**：使用 `rgba()` 函数设置带有透明度的背景颜色。 这些知识点对于理解和操作网页元素的样式至关重要，掌握它们能够帮助开发者更有效地控制网页布局和视觉效果。