Относиться к <dd>как к ребенку <dt> - PullRequest
Новая
       7

Относиться к <dd>как к ребенку <dt>

3 голосов
/ 28 января 2020

Я хочу сделать что-то вроде этого: 

dt.red {
  color: red;
}

.red~dd {
  border-left: solid red;
}

dt.blue {
  color: blue;
}

.blue~dd {
  border-left: solid blue;
}
<dl>
  <dt class="red">Red</dt>
  <dd>Crimson</dd>
  <dt class="blue">Blue</dt>
  <dd>Azure</dd>
  <dd>Cyan</dd>
  <dt class="red">More red!</dt>
  <dd>Vermilion</dd>
  <dd>Scarlet</dd>
</dl>

https://www.w3schools.com/code/tryit.asp?filename=GBC5PEYKTOJB Но поскольку синее правило идет вторым, все <dd> после class="blue синий.

Я мог бы использовать .red + dd, если бы был только один, но часто их больше одного. Я мог бы просто обернуть каждый сегмент в <div class="color">, и я, вероятно, в конечном итоге сделаю это.

Но есть ли другой способ? Что-то, что заставляет каждый последующий переписывать прошлые?

Ответы [ 2 ]

1 голос
/ 28 января 2020

Как бы я это сделал?

Будь явным со своими классами. Добавьте классы к dt и dd. Одним из недостатков списков определений является отсутствие явной группировки. Вам либо нужно признать, что короткое падение ( не оборачивать их в div, это недействительно HTML Я забираю это обратно ... это действительно ), либо приходить с альтернативой, которая следует ... 

dt.red {
  color: red;
}

dd.red{
  border-left: solid red;
}

dt.blue {
  color: blue;
}

dd.blue {
  border-left: solid blue;
}

dd.crimson { 
  color:crimson;
}

dd.azure {
  color:azure;  
}

dd.azure, dd.cayan {
  background-color:#333;
}

dd.cyan {
  color:cyan;
}
<dl>
  <dt class="red">Red</dt>
  <dd class="red crimson">Crimson</dd>
  <dt class="blue">Blue</dt>
  <dd class="blue azure">Azure</dd>
  <dd class="blue azure">Cyan</dd>
  <dt class="red">More red!</dt>
  <dd class="red vermillion">Vermilion</dd>
  <dd class="red scarlet">Scarlet</dd>
</dl>

В качестве альтернативы можно работать со структурой HTML, обеспечивающей группирование, в этом случае может работать вложенный список 

ul {
list-style:none;
padding-left: 0;
}

ul ul {
  padding-left: 40px;
  color: black;
}


li.red {
  color: red;
}

li.red li {
  border-left:solid red;
}


li.blue {
  color: blue;
}

li.blue li {
  border-left:solid blue;
}
<ul>
  <li class="red">Red
    <ul>
      <li>Crimson</li>
    </ul>
  </li>
  <li class="blue">Blue
    <ul>
      <li>Azure</li>
      <li>Cyan</li>
    </ul>
  </li>
  <li class="red">More Red
    <ul>
      <li>Vermilion</li>
      <li>Scarlet</li>
    </ul>
  </li>
</ul>

Или оберните каждую группу div

1 голос
/ 28 января 2020

рабочий пример 

.red {
    color: red;
}

.blue {
    color: blue;
}

dt, dd {
  padding: 5px;
}

.red ~ dd,
.red ~ .blue ~ .red ~ dd,
.red ~ .blue ~ .red ~ .blue ~ .red ~ dd {
    border-left: 3px solid red;
}

.blue ~ dd,
.blue ~ .red ~ .blue ~ dd,
.blue ~ .red ~ .blue ~ .red ~ .blue  ~ dd {
    border-left: 3px solid blue;
}
<dl>
  <dt class="red">Red</dt>
  <dd>after red</dd>
  <dd>Red also</dd>

  <dt class="blue">Blue</dt>
  <dd>after blue</dd>
  <dd>should be blue</dd>

  <dt class="blue">Blue</dt>
  <dd>should be blue</dd>
  <dd>should be blue</dd>

  <dt class="red">Red</dt>
  <dd>should be red</dd>
  <dd>should be red</dd>


  <dt class="blue">Blue</dt>
  <dd>should be blue</dd>
  <dd>should be blue</dd>


  <dt class="blue">Blue</dt>
  <dd>should be blue</dd>
  <dd>should be blue</dd>


  <dt class="red">Red</dt>
  <dd>should be red</dd>
  <dd>should be red</dd>

  <dt class="red">Red</dt>
  <dd>should be red</dd>
  <dd>should be red</dd>

  <dt class="red">Red</dt>
  <dd>should be red</dd>
  <dd>should be red</dd>


  <dt class="blue">Blue</dt>
  <dd>should be blue</dd>
  <dd>should be blue</dd>

  <dt class="blue">Blue</dt>
  <dd>should be blue</dd>
  <dd>should be blue</dd>
</dl>
...