React教程中CSS选择器与HTML类名匹配及section_padding作用的疑问

1. .gpt3__header CSS规则的作用机制 #

.gpt3__header是类选择器，它会匹配页面中所有带有gpt3__header类名的元素——不管这个元素是否附带其他类、ID或属性。

你提供的React标签：

<div className="gpt3__header section_padding" id="home">

（注：React中用className替代原生HTML的class，最终渲染到浏览器时会转换为标准class属性）

这个div同时拥有两个类名：gpt3__header和section_padding，浏览器会分别识别每个类名对应的CSS规则。因此.gpt3__header里的display: flex;会直接作用于该div，将其转为Flex容器——容器内的子元素会默认遵循Flex布局规则（比如横向排列、自动分配空间等）。

2. 关于section_padding类的疑问 #

• section_padding并非“内部CSS命令”，它只是一个自定义类名，大概率是教程项目里用来统一设置区块内边距的通用类（比如可能定义了padding: 4rem 6rem;这类样式）。
• 多个类名用空格分隔时，浏览器不会忽略任何一个。这个div会同时应用gpt3__header和section_padding两个类的所有样式，两个类选择器都能正常匹配该元素，不存在“被忽略”的情况。

举个直观例子，如果项目中有这样的CSS规则：

.section_padding {
  padding: 4rem 6rem;
}

那么这个div会同时拥有display: flex的布局属性和padding: 4rem 6rem的内边距样式。

内容的提问来源于stack exchange，提问作者coderoftheday