如何设计风格 for each of these flexbox classes separately?

问题描述 投票：-2回答：5

我需要为每个弹性框不同地设置<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>
html5 css3 flexbox
5个回答
1
投票

如果您要编辑HTML / CSS代码，至少应该学习它的基础知识; CSS的整个想法是为您的HTML元素设置样式，可以使用选择器（类，ID，伪元素）进行定位;这些选择器可以组合起来改变目标元素的specificity，它允许您从一般元素中选择一个非常具体和唯一的元素。

使用行.wrapper > .box-wrap > .box:last-child，你告诉你的CSS定位最后一个元素的.box元素，并且也是.box-wrap元素的直接子元素，.wrapper元素也是h1元素的直接子元素

在您的情况下，如果您有三个.heading { font-size: 22px; } .h1 { color: red; } .h2 { color: blue; font-size: 32px; } .h3 { color: green; font-size: 14px; }元素不是同一父级的子元素，最简单的方法是添加特定于每个元素的类，然后将样式添加到该CSS类。像这样：

<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>
<h1 id="whatever_you_wanna_call_this">Sample text</h1>
1
投票

您应该避免一次显示多个相同的h标记。无论如何，你可以给每个人一个id属性，给他们“独特”的触摸。

.wrapper > .box-wrap > .box:last-child
0
投票

CSS选择器last选择带有class = box的子元素的box-wrap子元素，其中class = wrapper的元素为class = 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

您可以为每个HTML Styles - CSS元素指定唯一的ID并在CSS中定义其样式，或使用内联CSS（请参阅：h2）

0
投票

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

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

.box组合器意味着“只选择.wrapper（h1的直接子女）（不是任何后代）。

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

<h1 class="small-italic">

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

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

建议的方法是将类添加到h1或.box，以便您可以更直接地设置它们的样式。

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

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

要么

the > combinator

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

关于您复制的代码：

你可以想象选择器使用.wrapper > .box > h1就像你的DOM树中的路径或地址。

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

在您自己的样式中，您使用的是.wrapper h1，这意味着您要为父元素内部的元素添加选择器。

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

你的第二个选择器.box-wrap h1也是如此：所有的h1都在.box元素中。

qazxswpoi将解决你的两个h1，那些位于.box-wrap元素内的地方。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.