Html 如何设计<；h1>；是否分别针对这些flexbox类？

我需要为每个flex Box设置不同的

文本样式（文本对齐、字体大小等）。 我试着去做，但没有成功。 我从这个网站的答案中获取了flexbox代码，我不确定程序员做了什么，例如，我不知道

.wrapper>.box wrapp>.box:last child

的意思

请你修改我的代码好吗。多谢各位

.wrapper{
显示器：flex；
证明内容：之间的空间；
宽度：100%；
}
.wrapper>*{
弹性：1；
保证金：5px；
}
.wrapper>.box wrapp{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.wrapper>.box wrapp>.box{
弹性：1；
保证金：5px；
}
.wrapper>.box wrapp>.box:第一个孩子{
边际上限：0；
}
.wrapper>.box wrapp>.box:最后一个子项{
页边距底部：0；
}
.盒子{
边框：1px实心；
}
.包装纸h1{
字体大小：15px；字体样式：斜体；颜色：#555；文本对齐：左；
}
.包装盒h1{
字体大小：22px；颜色：#777；文本对齐：右；
}
.框h1{
字体大小：32px；颜色：#CC000；文本对齐：右；
}
@介质（最大宽度：768px）{
.包装纸{
-webkit柔性方向：列；
弯曲方向：立柱；
}
.框h1，h1{
文本对齐：居中；
}
}

试验
.包装纸{
显示器：flex；
证明内容：之间的空间；
宽度：100%；
}
.wrapper>*{
弹性：1；
保证金：5px；
}
.wrapper>.box wrapp{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.wrapper>.box wrapp>.box{
弹性：1；
保证金：5px；
}
.wrapper>.box wrapp>.box:第一个孩子{
边际上限：0；
}
.wrapper>.box wrapp>.box:最后一个子项{
页边距底部：0；
}
.盒子{
边框：1px实心；
}
.包装纸h1{
字体大小：15px；字体样式：斜体；颜色：#555；文本对齐：左；
}
.包装盒h1{
字体大小：22px；颜色：#777；文本对齐：右；
}
.框h1{
字体大小：32px；颜色：#CC000；文本对齐：右；
}
@介质（最大宽度：768px）{
.包装纸{
-webkit柔性方向：列；
弯曲方向：立柱；
}
.框h1，h1{
文本对齐：居中；
}
}
包装纸
包装盒
盒子

如果你要编辑HTML/CSS代码，你至少应该学习它的基础知识；CSS的整个思想是设计HTML元素的样式，这些元素可以使用选择器（类、ID、伪元素）作为目标；这些选择器可以组合在一起，以改变目标元素的属性，从而允许您从常规元素选择为非常特定和唯一的元素

在

.wrapper>.box wrap>.box:last child

行中，您告诉CSS以

.box

元素为目标，该元素是最后一个元素，也是

.box wrap

元素的直接子元素，它同样是

.wrapper

元素的直接子元素

在您的例子中，如果有三个

h1

元素不是同一父元素的子元素，最简单的方法是为每个元素添加一个特定的类，然后将样式添加到该CSS类中。像这样：

。标题{
字体大小：22px；
}
.h1{
颜色：红色；
}
.h2{
颜色：蓝色；
字体大小：32px；
}
.h3{
颜色：绿色；
字体大小：14px；
}

标题1
标题2
标题3

您应该避免一次显示多个相同的h标记。不管怎样，你可以给他们每个人一个id属性，给他们“独特”的触感

示例文本

CSS选择器

.wrapper>.box wrapp>.box:last child

选择class=

box

的子元素的

last

子元素的class=

box

，class=

wrapper

的子元素。（见：）

---

我首先要说的是，一个页面上只包含一个h1是最好的做法。所有其他的都应该是
h2
，
h3
，等等。这对搜索引擎优化、语义和可访问性来说是最好的（除非您在
部分或
文章
标签中添加其他h1）。如果您想以不同的方式设计不同的h2，我建议添加基于内容的类来定义为什么要以不同的方式设计它们，比如
.intro h2
或
.hero article h2

也就是说，我在每个元素旁边添加了有效的CSS选择器

组合器意味着“只选择
.box
，它是
.wrapper
的直接子对象（不是任何后代）

为了在
.box wrap.box h1
结构中针对不同的
h1
，您需要添加不同的类（不要使用id来设置样式），或者使用伪选择器，如
.box wrap.box:first child h1
，
.box wrap.box:last child h1
，或者
.box:nth child（奇数）h1
，等等

<div class="wrapper"> <!-- .wrapper -->
  <div class="box"> <!-- .wrapper > .box -->
    <h1>Wrapper</h1> <!-- .wrapper > .box h1 -->
  </div>
  <div class="box-wrap"> <!-- .box-wrap -->
    <div class="box"> <!-- .box-wrap .box -->
      <h1>Box-wrap</h1> <!-- .box-wrap .box h1 -->
    </div>
    <div class="box"> <!-- .box-wrap .box -->
      <h1>Box</h1> <!-- .box-wrap .box h1 -->
    </div>
  </div>
</div>


包装纸
包装盒
盒子
正如您在现有代码中看到的，在CSS中选择这样的元素很难理解，而且对于html的顺序和结构来说非常具体

推荐的方法是将类添加到h1或.box中，这样您就可以更直接地设置它们的样式

<h1 class="small-italic">

.small-italic {
  font-size: 15px;
  font-style: italic;
}


.小斜体{
字体大小：15px；
字体：斜体；
}

或


.小斜体标题h1{
字体大小：15px；
字体：斜体；
}

正如您所看到的，您还可以为一个元素分配多个类

关于您复制的代码：

您可以想象选择器使用DOM树中的路径或地址

对于第一个h1，“地址”将是
.wrapper>.box>h1
。每个>都意味着为直接子元素添加一个选择器

在您自己的样式中，您正在使用，这意味着您正在为父元素中的某个元素添加选择器

所以
.wrapper h1
匹配所有h1，因为它们都在wrapper元素中

第二个选择器
.box h1
：所有h1都位于.box元素中
<div class="wrapper"> <!-- .wrapper -->
  <div class="box"> <!-- .wrapper > .box -->
    <h1>Wrapper</h1> <!-- .wrapper > .box h1 -->
  </div>
  <div class="box-wrap"> <!-- .box-wrap -->
    <div class="box"> <!-- .box-wrap .box -->
      <h1>Box-wrap</h1> <!-- .box-wrap .box h1 -->
    </div>
    <div class="box"> <!-- .box-wrap .box -->
      <h1>Box</h1> <!-- .box-wrap .box h1 -->
    </div>
  </div>
</div>

<h1 class="small-italic">

.small-italic {
  font-size: 15px;
  font-style: italic;
}

<div class="box small-italic-headline">

.small-italic-headline h1 {
  font-size: 15px;
  font-style: italic;
}