Question

我需要为每个伸缩框的<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>

Answer 1

如果要编辑HTML / CSS代码，则至少应了解其基本知识； CSS的整个思想是设置HTML元素的样式，这些元素可以使用选择器（类，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>

Answer 2

您应该避免一次显示多个相同的h标签。无论如何，您都可以给每个人一个id属性，以使其具有“独特”的触感。

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

Answer 3

CSS选择器.wrapper > .box-wrap > .box:last-child选择具有类= last的子元素具有类= box的{{1}}子元素和具有类= box-wrap的元素。（请参阅：CSS selectors）

wrapper

您可以为每个<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>元素分配唯一的ID，并在CSS中定义其样式，或使用内联CSS（请参阅：HTML Styles - CSS）

Answer 4

首先，最好的做法是在页面上仅包含一个h1。所有其他字符都应为h2，h3等。这最适合SEO，语义和可访问性（除非您在section或article标签内添加其他h1）。如果您想为不同的h2设置不同的样式，建议您添加基于内容的类来定义为什么，使它们的样式不同，例如.intro h2或.hero-article h2。 / p>

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

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

为了在h1结构中定位不同的.box-wrap .box h1，您需要添加不同的类（不要使用id进行样式设置），或使用伪选择器，例如{{1} }，.box-wrap .box:first-child h1或.box-wrap .box:last-child h1等

.box-wrap .box:nth-child(odd) h1

Answer 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匹配，因为它们都在wrapper元素内。

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

.box-wrap h1将解决您的h1中的两个，即位于.box-wrap元素内的某个地方。

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

5 个答案: