CSS: как пройти через вложенное дерево тегов диапазона, выбрать каждый диапазон и назначить отдельное значение каждому?

Question

CSS: как пройти через вложенное дерево тегов диапазона, выбрать каждый диапазон и назначить отдельное значение каждому?

0

Я работаю над экспериментом типографии CSS. http://codepen.io/vennsoh/pen/pbdyt

Я использую преимущества каскадной проблемы "em". Поэтому в моем коде вы увидите, что мой HTML имеет несколько тегов span, вложенных вместе.

Я наткнулся на другой эксперимент на днях, http://codepen.io/andyhullinger/pen/ipGht. Я бы хотел применить аналогичный эффект к моему тексту, однако у меня возникли проблемы с использованием SASS для создания отдельной задержки анимации для каждого тега span. Ниже мой код:

@for $i from 1 through 8{
 span:nth-child(#{$i}){
  animation-delay: $i*(0.8s/8);
 }
}

Очевидно, мой CSS-селектор, span: nth-child не работает. Все теги span используют задержку анимации, определенную в span: nth-child (1). Таким образом, все они имеют одинаковую задержку анимации, а не другую.

<span>B
 <span>L
  <span>A</span>
 </span>
</span>

Как выбрать "L, назначить значение", а затем "A, присвоить другое значение"?

Чтобы быть ясными, это то, чего я собираюсь достичь: http://codepen.io/vennsoh/pen/pAsIm. Я могу написать код, чтобы перебрать количество тегов span и объединить мой селектор. Но я просто думаю, что это можно сделать с помощью CSS-селектора.

Vennsoh 20 янв. 2014, в 05:17

Источник

0

Я не могу заставить простой стиль CSS работать с форматом span-in-a-span. Но если у вас есть три отдельных пролета, это работает. Вы действительно нуждаетесь в span-in-a-span?
TimSPQR 20 янв. 2014, в 04:21
0

Да, мне нужно знать, есть ли способ сделать это. Это не только для этого эксперимента, просто в целом, это можно решить с помощью CSS.
Vennsoh 20 янв. 2014, в 04:46
1

У меня есть базовый стиль, работающий с помещением его в div и стилизацией с div> span и т. Д. Вот скрипка - jsfiddle.net/qcscf/1 - Может потребоваться некоторое грубое программирование для цикла. Я буду больше работать над этим завтра.
TimSPQR 20 янв. 2014, в 05:04

Показать ещё 1 комментарий

Теги:

html

sass

css

2 ответа

Ещё вопросы

Я не могу заставить простой стиль CSS работать с форматом span-in-a-span. Но если у вас есть три отдельных пролета, это работает. Вы действительно нуждаетесь в span-in-a-span?
Да, мне нужно знать, есть ли способ сделать это. Это не только для этого эксперимента, просто в целом, это можно решить с помощью CSS.
У меня есть базовый стиль, работающий с помещением его в div и стилизацией с div> span и т. Д. Вот скрипка - jsfiddle.net/qcscf/1 - Может потребоваться некоторое грубое программирование для цикла. Я буду больше работать над этим завтра.

Vennsoh · Answer 1 · 2014-01-20T05-57-00.000Z

Хорошо, ребята, я решил это программированием. Это просто, но я просто подумал, что там могут быть какие-то причудливые селектора CSS, которые могут выполнять эту работу для меня вместо того, чтобы полагаться на SASS-скрипты. http://codepen.io/vennsoh/pen/pbdyt

В этом суть:

$char: 8;
$string: " > span";
$store: ".btn-h1 span";

@for $i from 1 through $char{
  #{$store}{
    animation-delay: $i*(0.8s/$char);
  }
  $store: $store + $string;
}

mahendra rajeshirke · Answer 2 · 2014-01-20T05-20-00.000Z

Попробуйте выполнить css в первом примере (http://codepen.io/vennsoh/pen/pbdyt)

.btn-h1{
  @include text-shadow(0 0 0 black, 0 0 1px black, 0 1px 2px hsla(0, 0%, 0%, .5));
  font-size: 2em;
  color: transparent;
}

.btn-h1 > span > span > span{
  font-size: 1.1em;
  animation:btn_ghost 0.8s ease-in-out infinite alternate;
  @include text-shadow(0 0 0 black, 0 0 1px black, 0 1px 2px hsla(0, 0%, 0%, .5));
  font-size: 1em;
  color: transparent;
}

.btn-h1 > span > span{
  @include text-shadow(0 0 0 red, 0 0 1px red, 0 1px 2px hsla(0, 0%, 0%, .5));
  font-size: 2em;
  color: transparent;
}

$char: 8;

@for $i from 1 through $char{
  span:nth-child(#{$i}){
    animation-delay: $i*(0.8s/$char);
  }
}

@keyframes btn_ghost{
  100% {text-shadow:30px 0 100px black;}
}

Спасибо, но вы сами попробовали следующий CSS Не работает
Я обновил второе правило, оно может помочь .btn-h1> span> span> span, .btn-h1> span {font-size: 1.1em; анимация: btn_ghost 0.8s бесконечная альтернатива замедления-выхода; @include text-shadow (0 0 0 черный, 0 0 1px черный, 0 1px 2px hsla (0, 0%, 0%, .5)); размер шрифта: 1em; цвет: прозрачный; }
Спасибо, но я думаю, что вы неправильно поняли вопрос. Это то, что я собираюсь достичь. codepen.io/vennsoh/pen/pAsIm Если у вас есть лучший способ написать это, рефакторинг кода, дайте мне знать.