多个后代类型的 CSS 选择器 #example> div,p,a{}

Question

好吧，我相信简单的答案是 css 在这方面存在缺陷，如果没有 SAAS 或其他不支持浏览器(如 ie 或 Edge)的技术，就无法完成 我也需要它们。

因为我不能使用 SASS/LESS 或 :matches() 我所做的是找到一个将 SASS 转换为 css 的工具。这让我可以更快地编写 CSS。 链接:https://www.sassmeister.com/

:matches() 可以工作但不支持即和边缘， https://css-tricks.com/almanac/selectors/m/matches/

SAAS 也可以这样工作

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

原始问题

我很好奇是否有办法创建类、类型或 ID 的后代列表。

例子是类hello

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

如果必须这样做，那似乎是 css 中的一个缺陷...我一直在寻找类似的东西

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

类似这样，但前提是每个元素都是某个 id 的后代。 可能#example 我让它工作的唯一方法是逐字输入#example body、#example div、#example span ....等等。我假设有一种方法可以直接说

.example >(制作、逗号、分隔、列表){}

像这样很长的..

 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 是您的做法，那就这样吧。

基本上我想知道如何执行与某个类或 id 相关的操作，而不必在每个类或 id 的前面写上 id。

Answer 1

我只挖了大约 15 分钟。但看起来由于浏览器的支持参差不齐，这个功能实际上并不存在于任何可实现的方式中。

这是我找到的一篇关于“:matches()”伪类的 CSS 技巧文章。 https://css-tricks.com/almanac/selectors/m/matches/

它链接到这个 caniuse 页面，它会告诉你许多浏览器要么不支持它，要么正在弃用他们过去的供应商前缀实现。 https://caniuse.com/#feat=css-matches-pseudo