css - 有没有办法在 CSS 中使用 "similar"id 来设置标签的样式？

Question

我有一个通过专有图形包创建的 XML 文件，其格式大致如下:

<content>
<RootWidget attr="X1">
  <Widget attr="X2">
    <Foo attr="X3"></Foo>
    <Foo attr="X4"></Foo>
    <Foo attr="X5">
       <Bar attr="X6"></Bar>
       <Bar attr="X7"></Bar>
    </Foo>
  </Widget>
  <Widget attr="X8">
     <Foo attr="X9"></Foo>
  </Widget>
</RootWidget>
</content>

注意:在这里，“attr”是 XML 中的一些特殊属性，描述我们正在谈论的任何小部件的位置/颜色/字体/等。

我还有一个用我认为是 Java/Jetty voodoo 编写的编译程序，它将把上面的 XML 转换成 HTML 文件，如下所示:

<div id="root">
  <div id="root.RootWidget" style="Y1">
    <div id="root.RootWidget.Widget" style="Y2">
      <div id="root.RootWidget.Widget.Foo" style="Y3"></div> 
      <div id="root.RootWidget.Widget.Foo1" style="Y4"></div>
      <div id="root.RootWidget.Widget.Foo2" style="Y5">
        <div id="root.RootWidget.Widget.Foo2.Bar" style="Y6"></div>
        <div id="root.RootWidget.Widget.Foo2.Bar1" style="Y7"></div>
      </div>
    </div>
  <div id="root.RootWidget.Widget1" style="Y8">
    <div id="root.RootWidget.Widget1.Foo" style="Y9"></Y9>
  </div>
<div>

基本上，转换器获取 XML 文件中的所有小部件，根据它们在 DOM 中的位置为它们分配一个唯一 ID，并将所有专有格式属性(X1、X2...)转换为内联“HTML 中的“样式”属性(Y1、Y2...)

我还有一个可以访问和修改的 CSS 文件，它为最终的 HTML 页面设置样式。我希望能够使用此样式表将样式应用于例如RootWidget 父级的所有 Widget/Widget1/Widget2(等)子级或 Widget/Widget1/Widget2(等)父级的所有 Foo/Foo1/Foo2(等)子级或 Widget/Widget1/的所有 Bar/Bar1/Bar2(等)子级Widget2 (etc) parents 但不是 Foo/Foo1/Foo2 (etc) parents，等等。我如何使用从我的软件中生成的 HTML 格式执行此操作？

Answer 1

是的!

只需使用 element[attribute^=value] 标签即可。

在你的情况下，我认为选择器是

.root-widget > div[id^='Widget']