如何分别为每个 flexbox 类设置 <h1> 样式？答案

【问题标题】：How to style the <h1> for each of these flexbox classes separately?如何分别为每个 flexbox 类设置 <h1> 样式？
【发布时间】：2019-03-02 05:20:07
【问题描述】：

我需要为每个弹性框设置不同的样式 <h1> 文本（文本对齐、字体大小等）。我试图这样做，但它没有奏效。我从这个网站上的答案中获取了代码 flexbox 代码，但我不确定程序员做了什么，例如我不知道.wrapper > .box-wrap > .box:last-child 是什么意思。

请您修改我的代码。谢谢。

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.wrapper > * {
  flex: 1;
  margin: 5px;
}
.wrapper > .box-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrapper > .box-wrap > .box {
  flex:1;
  margin: 5px;
}
.wrapper > .box-wrap > .box:first-child {
  margin-top: 0;
}
.wrapper > .box-wrap > .box:last-child {
  margin-bottom: 0;
}
.box {
  border: 1px solid;
}


.wrapper h1{
font-size:15px; font-style:italic; color:#555; text-align: left;
}

.box-wrap h1{
font-size:22px; color:#777; text-align:right;
}

.box h1{
font-size:32px; color:#CC000; text-align:right;
}

@media (max-width: 768px) {
  .wrapper {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .box h1, h1{
  text-align:center;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">




<title>Test</title>

<style>

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.wrapper > * {
  flex: 1;
  margin: 5px;
}
.wrapper > .box-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrapper > .box-wrap > .box {
  flex:1;
  margin: 5px;
}
.wrapper > .box-wrap > .box:first-child {
  margin-top: 0;
}
.wrapper > .box-wrap > .box:last-child {
  margin-bottom: 0;
}
.box {
  border: 1px solid;
}


.wrapper h1{
font-size:15px; font-style:italic; color:#555; text-align: left;
}

.box-wrap h1{
font-size:22px; color:#777; text-align:right;
}

.box h1{
font-size:32px; color:#CC000; text-align:right;
}

@media (max-width: 768px) {
  .wrapper {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .box h1, h1{
  text-align:center;
  }
}



</style>
</head>



<body>


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



<header>



</body>

【问题讨论】：

我猜有些盒子继承了其中一个盒子的属性。

标签： html css flexbox

【解决方案1】：

如果你要编辑 HTML/CSS 代码，你至少应该学习它的基础知识； CSS 的整体理念是为您的 HTML 元素设置样式，这些元素可以使用 selectors（类、id、伪元素）作为目标；这些选择器可以组合起来改变目标元素的specificity，这样您就可以从一个通用元素选择一个非常具体和独特的元素。

通过.wrapper > .box-wrap > .box:last-child 行，您告诉您的CSS 以.box 元素为目标，该元素是最后一个元素，也是.box-wrap 元素的直接子元素，它又是.wrapper 元素的直接子元素

在你的情况下，如果你有三个h1 元素不是同一个父元素的子元素，最简单的方法是为每个元素添加一个特定的类，然后将样式添加到该 CSS 类。像这样：

.heading {
  font-size: 22px;
}

.h1 {
  color: red;
}

.h2 {
  color: blue;
  font-size: 32px;
}

.h3 {
  color: green;
  font-size: 14px;
}

<div>
  <h1 class="heading h1">Heading 1</h1>
</div>
<div>
  <h1 class="heading h2">Heading 2</h1>
</div>
<div>
  <h1 class="heading h3">Heading 3</h1>
</div>

使用您的代码：

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.wrapper>* {
  flex: 1;
  margin: 5px;
}

.wrapper>.box-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wrapper>.box-wrap>.box {
  flex: 1;
  margin: 5px;
}

.wrapper>.box-wrap>.box:first-child {
  margin-top: 0;
}

.wrapper>.box-wrap>.box:last-child {
  margin-bottom: 0;
}

.box {
  border: 1px solid;
}

.wrapper h1 {
  font-size: 15px;
  font-style: italic;
  color: #555;
  text-align: left;
}

.box-wrap h1 {
  font-size: 22px;
  color: #777;
  text-align: right;
}

.box .header1 {
  color: red;
}

.box .header2 {
  color: green;
}

.box .header3 {
  color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">




  <title>Test</title>

  <style>
    .wrapper {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    
    .wrapper>* {
      flex: 1;
      margin: 5px;
    }
    
    .wrapper>.box-wrap {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .wrapper>.box-wrap>.box {
      flex: 1;
      margin: 5px;
    }
    
    .wrapper>.box-wrap>.box:first-child {
      margin-top: 0;
    }
    
    .wrapper>.box-wrap>.box:last-child {
      margin-bottom: 0;
    }
    
    .box {
      border: 1px solid;
    }
    
    .wrapper h1 {
      font-size: 15px;
      font-style: italic;
      color: #555;
      text-align: left;
    }
    
    .box-wrap h1 {
      font-size: 22px;
      color: #777;
      text-align: right;
    }
    
    .box h1 {
      font-size: 32px;
      color: #CC000;
      text-align: right;
    }
    
    @media (max-width: 768px) {
      .wrapper {
        -webkit-flex-direction: column;
        flex-direction: column;
      }
      .box h1,
      h1 {
        text-align: center;
      }
    }
  </style>
</head>



<body>


  <div class="wrapper">
    <div class="box">
      <h1 class="header1">Wrapper</h1>
    </div>
    <div class="box-wrap">
      <div class="box">
        <h1 class="header2">Box-wrap</h1>
      </div>
      <div class="box">
        <h1 class="header3">Box</h1>
      </div>
    </div>
  </div>


</body>

【讨论】：

【解决方案2】：

您应该避免一次显示多个相同的 h 标签。无论如何，您可以只为它们每个人赋予一个 id 属性，以赋予它们“独特”的触感。

<h1 id="whatever_you_wanna_call_this">Sample text</h1>

【讨论】：

谢谢。这就是我一开始所做的，但
样式也必须在 @media (max-width: 768px) 查询下更改（当屏幕缩小时我需要居中对齐文本），所以我被告知我必须在 CSS 中设置
的样式。

【解决方案3】：

CSS 选择器 .wrapper > .box-wrap > .box:last-child 选择具有 class=box 的子元素的 last 子元素和 class=box-wrap 的元素的 class=wrapper。（见：CSS selectors）

<div class="wrapper">        <- elements with class=wrapper
  <div class="box"></div>
  <div class="box-wrap">     <- elements with class=box-wrap
    <div class="box"></div>
    <div class="box"></div>  <- last element with class=box
  </div>
</div>

您可以为每个 h1 元素分配一个唯一 ID，并在 CSS 中定义其样式，或使用内联 CSS（参见：HTML Styles - CSS）

【讨论】：

【解决方案4】：

我首先要说的是，最好只在一个页面上包含一个 h1。所有其他人都应该是h2、h3 等。这对于 SEO、语义和可访问性来说是最好的（除非您在 section 或 article 标签内添加其他 h1）。如果你想为不同的 h2 设置不同的样式，我建议添加基于内容的类来定义为什么你设置不同的样式，例如 .intro h2 或 .hero-article h2。

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

> 组合子的意思是“只选择.box，它是.wrapper 的直接子代（不是任何后代）。

为了在.box-wrap .box h1 结构中定位不同的h1s，您需要添加不同的类（不要使用id 来设置样式），或者使用.box-wrap .box:first-child h1、.box-wrap .box:last-child h1 等伪选择器，或.box-wrap .box:nth-child(odd) 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>

【讨论】：

【解决方案5】：

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

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

<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;
}

如您所见，您还可以为一个元素分配多个类。

关于你复制的代码：

您可以想象选择器使用 the > combinator 就像 DOM 树中的路径或地址。

对于您的第一个 h1，“地址”将是 .wrapper > .box > h1。每个 > 表示您正在为直接子元素添加选择器。

在您自己的样式中，您使用的是decsendent combinator，这意味着您正在为父级内部某处的元素添加选择器。

所以.wrapper h1 匹配你所有的h1，因为它们都在包装元素内。

第二个选择器 .box h1 也是如此：所有 h1 都在 .box 元素内。

.box-wrap h1 将处理您的两个 h1，即位于 .box-wrap 元素内的那些。

【讨论】：

样式也必须在 @media (max-width: 768px) 查询下更改（当屏幕缩小时我需要居中对齐文本），所以我被告知我必须在 CSS 中设置

的样式。