2025年css选择器ppt（2025年css选择器知识点总结）

CSS选择器如何使用_CSS选择器应用详细指南

基础选择器类型与用法类型选择器直接匹配HTML标签名（如 p、div），适用于全局基础样式定义。例如：p { font-size： 16px； }类选择器与ID选择器 类选择器（.class-name）：可复用，适用于多个元素共享样式。ID选择器（#id-name）：唯一性，通常用于页面唯一元素（如弹窗容器）。

问题根源：CSS优先级冲突在提供的代码中，两个规则同时作用于图片高度：类选择器 .gift-img 设置 height： 400pxID选择器 #gift-img-cheers 设置 height： 200px由于ID选择器优先级高于类选择器，导致图片高度被强制为200px，与预期不符。

重置浏览器默认样式浏览器为body、header、nav等元素预设了margin和padding，这是空白的主要来源。

安装和使用 安装 SASS是用Ruby语言编写的，但使用SASS不需要了解Ruby的语法。在安装SASS之前，需要先安装Ruby。安装Ruby后，在命令行输入gem install sass命令来安装SASS。使用 SASS文件是普通的文本文件，文件后缀名为.scss，意为Sassy CSS。

使用工具（如Webpack）合并文件，减少HTTP请求。适用场景与选型建议原型开发/教学演示：优先选择CDN引入的Bootstrap或UIKit，快速验证设计。小型项目：Tailwind CSS的原子类适合快速定制，但需注意CDN功能限制。React项目：直接使用MUI的React版本，避免纯HTML版本的兼容性问题。

相对定位（Relative Positioning）的微调应用相对定位通过 position： relative 结合 top/right/bottom/left 属性，在元素原始位置基础上进行微调，适用于局部细节优化。

css3选择器

CSS3选择器是CSS中用于选择和操作HTML元素的强大工具，它们极大地增强了样式表的灵活性和精确性。以下是对CSS3选择器的详细归纳和解释：基本选择器元素选择器：通过HTML元素名称选择元素，如div、span等。类选择器：通过元素的class属性选择元素，以点号（.）开头，如.myClass。

EF：子选择器，选择父元素E的直接子元素F。E+F：相邻兄弟选择器，选择紧接在元素E后面的兄弟元素F。E~F：通用兄弟选择器，选择元素E之后的所有兄弟元素F。

p：nth-child（odd）：选择所有奇数位置的 p 元素。p：nth-child（even）：选择所有偶数位置的 p 元素。公式选择 p：nth-child（an + b）：这是一个更复杂的表达式，其中 a 和 b 是整数，n 是计数器（从 0 开始）。这个表达式允许你基于一个周期和偏移值来选择元素。

CSS3 的 ：nthchild 选择器基本用法如下：基本选择：p：nthchild：选择父元素中第 n 个子元素，且该子元素为 p 元素。n 是从 1 开始的。例如，p：nthchild 表示选择父元素中的第二个 p 元素。倍数选择：p：nthchild：选择父元素中所有符合 an规则的 p 元素。

css基本选择器包括哪些

CSS基本选择器主要包括标签选择器、类选择器、ID选择器、通用选择器（通配符），部分分类中还包括标签指定式选择器（交集选择器）和并集选择器。以下是对各类选择器的详细说明：标签选择器使用HTML标签名称作为选择器，为页面中某一类标签对应的元素指定统一的CSS样式。

CSS基本选择器包括元素选择器、类选择器、ID选择器、属性选择器和伪类选择器。 元素选择器：通过元素名称来选择元素。比如p元素选择器会选中页面中所有的段落。它能快速定位特定类型的元素，进行统一的样式设置。 类选择器：使用点号（.）后跟类名来选择元素。一个元素可以有多个类名，方便复用样式。

CSS基本选择器包括元素选择器、类选择器、ID选择器、属性选择器和伪类选择器。 元素选择器：通过元素名称来选择元素。比如p元素选择器会选中页面中所有的段落元素。它能快速定位到特定类型的元素，方便对其进行样式设置。 类选择器：使用点号（.）后跟类名来选择元素。