Как стилизовать <h1> для каждого из этих классов flexbox отдельно? - PullRequest
Новая
       3

Как стилизовать <h1> для каждого из этих классов flexbox отдельно?

0 голосов
/ 01 марта 2019

Мне нужно по-разному стилизовать текст <h1> (выравнивание текста, размер шрифта и т. Д.) Для каждого из этих flex-блоков.Я пытался сделать это, но это не сработало.Я взял код 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>

Ответы [ 5 ]

0 голосов
/ 02 марта 2019

Как вы видите в существующем коде, подобный выбор элементов в 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;
}

Как видите, вы также можете назначить несколько классов элементу.

Относительно кода, который вы скопировали:

Вы можете представить селектор, используя комбинатор как путь или адрес в вашем дереве DOM.

Для вашего первогоh1, «адрес» будет .wrapper > .box > h1.Каждый> означает, что вы добавляете селектор для прямого дочернего элемента.

В своих собственных стилях вы используете decsendent комбинатор , что означает, что вы добавляете селектор для элементаэто где-то внутри родителя.

Так что .wrapper h1 соответствует всем вашим h1, потому что они все находятся внутри элемента оболочки.

То же самое относится и ко второму селектору .box h1: все h1находятся внутри элемента .box.

.box-wrap h1 будет адресовать два ваших h1, те, которые находятся где-то внутри элемента .box-wrap.

0 голосов
/ 02 марта 2019

Начну с того, что лучше всего включать ОДИН h1 на страницу.Все остальные должны быть h2, h3 и т. Д. Это лучше всего подходит для SEO, семантики и доступности (если вы не добавляете другие h1 внутри тега section или article).Если вы хотите по-разному стилизовать разные h2, я бы предложил добавить классы на основе контента, чтобы определить почему вы по-разному их стилизуете, например, .intro h2 или .hero-article h2.

Тем не менее, я добавил эффективные селекторы CSS рядом с каждым элементом.

Комбинатор > означает «только выбрать .box, который является прямым потомком .wrapper (но не любого потомка).

Для нацеливания на различные h1 с в структуре .box-wrap .box h1 вы захотите добавить отдельные классы (не используйте идентификаторы для стиля) или использовать псевдо-селекторы, такие как .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>
0 голосов
/ 01 марта 2019

Не следует показывать более одного тега h одновременно.В любом случае, вы можете просто дать каждому из них атрибут id, чтобы придать им «уникальный» контакт. 

<h1 id="whatever_you_wanna_call_this">Sample text</h1>
0 голосов
/ 01 марта 2019

Селектор CSS .wrapper > .box-wrap > .box:last-child выбирает дочерний элемент last с классом = box дочерних элементов с классом = box-wrap элементов с классом = wrapper.(См .: Селекторы CSS ) 

<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 и определить его стиль в CSS, или использовать встроенный CSS (См .: HTML-стили - CSS )

0 голосов
/ 01 марта 2019

Если вы собираетесь редактировать код HTML / CSS, вы должны хотя бы изучить его основы;Вся идея CSS заключается в стилизации ваших HTML-элементов, на которые можно ориентироваться, используя селекторы (классы, идентификаторы, псевдоэлементы);эти селекторы можно комбинировать для изменения специфичности целевого элемента, что позволяет выбирать из общего элемента очень специфический и уникальный.

С помощьюline .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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...