CSS选择器详解：基础选择器和复合选择器

选择器、列表和表单标签 选择器是 CSS 中最基本也是最重要的概念之一，选择器的作用是找到 HTML 文档中的元素，并将样式应用于这些元素。选择器可以分为基础选择器和复合选择器两大类。 基础选择器是选择器的基础，它们可以单独使用，也可以与其他选择器组合使用。基础选择器包括标签选择器、类选择器、id 选择器、通配符选择器等。 标签选择器通过标签名找到满足条件的标签来作用 CSS 代码。例如，`p` 选择器将选择所有的 `<p>` 标签。 类选择器通过标签上的 class 属性对应的值找到满足条件的标签。例如，`.box` 选择器将选择所有具有 `class` 属性值为 `box` 的标签。 id 选择器通过标签上的 id 属性对应的值找到满足条件的标签。例如，`#header` 选择器将选择所有具有 `id` 属性值为 `header` 的标签。 通配符选择器是基础选择器中最通用的选择器，它可以找到页面中所有的标签，并设置样式。例如，`*` 选择器将选择所有的标签，并将其 margin 和 padding 设置为 0。 复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。复合选择器可以更准确、更高效地选择目标元素。常见的复合选择器包括后代选择器、子元素选择器、相邻兄弟选择器、后续兄弟选择器、属性选择器、伪元素选择器、伪类选择器等。 后代选择器根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素。例如，`.box .op` 选择器将选择所有具有 `class` 属性值为 `box` 的标签中的所有具有 `class` 属性值为 `op` 的后代标签。 子元素选择器根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素。例如，`.box > .op` 选择器将选择所有具有 `class` 属性值为 `box` 的标签中的所有具有 `class` 属性值为 `op` 的直接子标签。 列表标签是 HTML 中常用的标签之一，它们用于展示列表数据。常见的列表标签包括无序列表 (`<ul>`)、有序列表 (`<ol>`)、定义列表 (`<dl>`) 等。列表标签可以与 CSS 结合使用，实现列表的样式设置。 表单标签是 HTML 中常用的标签之一，它们用于收集用户输入信息。常见的表单标签包括文本输入框 (`<input>`)、密码输入框 (`<input type="password">`)、复选框 (`<input type="checkbox">`)、单选框 (`<input type="radio">`)、下拉菜单 (`<select>`) 等。表单标签可以与 CSS 结合使用，实现表单的样式设置。 选择器、列表标签和表单标签都是 HTML 和 CSS 中的基础概念，理解和熟练使用它们是前端开发的基础。