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

Мне нужно стилизовать текст <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>

Я предполагаю, что некоторые из ящиков наследуют свойства одного из ящиков.

— 01.03.2019 21:54

html css flexbox

01.03.2019 21:44

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

244

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

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

С помощью строки .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>

01.03.2019 21:56

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

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

благодаря. Это то, что я сделал сначала, но стиль <h1> также должен измениться под запросом @media (max-width: 768px) (мне нужно выровнять текст по центру, когда экран уменьшен), поэтому мне сказали, что я нужно стилизовать <h1> в css.

— 01.03.2019 22:05

01.03.2019 21:58

Селектор 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)

01.03.2019 21:59

Я начну с того, что лучше всего включать только ОДИН 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>

01.03.2019 22:02

Как вы видите в существующем коде, выбор таких элементов в 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. Каждый > означает, что вы добавляете селектор для прямого дочернего элемента.

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

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

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

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

01.03.2019 22:09