CSS-селекторы для нескольких дочерних типов #example> div, p, a {}

Question

Хорошо, я полагаю, что простой ответ - css ошибочен в этом смысле, и его нельзя сделать без SAAS или других методов, которые не поддерживают такие браузеры, как ie или Edge . Мне они тоже нужны.

Поскольку я не могу использовать SASS / LESS или: match (), то, что я сделал, - это инструмент, который преобразует SASS в css.это позволяет мне писать CSS быстрее.Ссылка: https://www.sassmeister.com/

: match () будет работать, но не поддерживает ie и edge, https://css -tricks.com / almanac / selectors / m / matchs /

также SAAS будет работать так же

section, article, aside, nav {
  h1 {
    color: red;
  }
}

Исходный вопрос

Мне было бы любопытно, если есть способ создать список потомков класса, типа или идентификатора.

пример - класс hello

.hello a, .hello div, .hello p{ 
    stuff
}

если это то, как это нужно сделать, то это похоже на недостаток в css ... Я искал больше что-то вроде

.hello > a,div,p
{
     stuff
} but this doesn't work

Примерно так, но только если каждый элемент является потомком определенного идентификатора .. может #example Единственный способ заставить его работать - буквально набрать #example body, #example div, #example span.... и т. д. Я хотел бы предположить, что есть способ просто сказать

.example> (make, запятая, разделенный, список) {}

для действительно длинных, таких как это ..

 body,  div,  span,  applet,  object,  iframe,
 h1,  h2,  h3,  h4,  h5,  h6,  p,  blockquote,  pre,  hr,
 a,  abbr,  address,  cite,  code,
 del,  dfn,  em,  img,  ins,  kbd,  q,  s,  samp,
 small,  strong,  sub,  sup,  tt,  var,
 b,  u,  i,
 dl,  dt,  dd,  ol,  ul,  li,
 fieldset,  form,  label,  legend,
 table,  caption,  tbody,  tfoot,  thead,  tr,  th,  td,
article,  aside,  canvas,  details,  figcaption,  figure,
footer,  header,  hgroup,  menu,  nav,  section,  summary,
time,  mark,  audio,  video {
    margin: 0;
    padding: 0;
}

Я видел примеры только для отдельных предметов.Если вы добавляете id перед everysingle one именно так, как вы это делаете, то пусть так и будет.

По сути, я хочу знать, как сделать это, относящееся к определенному классу или идентификатору, без необходимости писать идентификатор передкаждого из них.

Answer 1

Я сделал всего около 15 минут копания.Но похоже, что из-за поддержки пятнистого браузера эта функция на самом деле не существует ни одним из реализуемых способов.

Вот статья об хитростях CSS, которую я нашел о псевдо-': match () 'учебный класс.https://css -tricks.com / almanac / selectors / m / matchs /

Он ссылается на эту страницу caniuse, которая покажет вам, что многие браузеры либо не поддерживают ее, либо устарелиих предыдущая реализация с префиксом поставщика.https://caniuse.com/#feat=css-matches-pseudo

Answer 2

Я думаю, что это невозможно только с помощью CSS (на данный момент).Но вы можете использовать препроцессор, такой как SASS или LESS, для написания таких правил:

#example {
    span, div {
        color:red;
    }
}

demo: https://jsfiddle.net/mq5w0ex1/3/

Answer 3

Для соответствия всем потомкам <something>,

something > *

Так что для class="example":

.example > *

Вот все отношения и совпадения ,Вы пропустили третий в списке, *.