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>

注意：在这里，＆＃34; attr＆＃34;是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 ...）转换为内联的＃34;风格＆＃34; HTML中的属性（Y1，Y2 ...）

我还有一个可以访问和修改的CSS文件，它为最终的HTML页面设置了样式。我希望能够使用此样式表将样式应用于例如RootWidget父项的所有Widget / Widget1 / Widget2（等）子项或Widget / Widget1 / Widget2（等）父项的所有Foo / Foo1 / Foo2（等）子项或Widget / Widget1 /的所有Bar / Bar1 / Bar2（等）子项Widget2（等）父母但不是Foo / Foo1 / Foo2（等）父母，依此类推。如何使用我的软件提供的HTML格式进行此操作？

Answer 1

是的！

只需使用element[attribute^=value]标记。

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

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

Answer 2

根据给定的结构，我会选择suffix属性选择器[id$="value"]（因为它们在开头看起来都一样）和contain选择器div[id*="value"]。< / p>

div[id$='RootWidget'] div {
  margin: 2px;
  padding: 0px 30px;
  border: 1px solid;
}
div[id$="Foo"] {
  background: green;  
}
div[id*="Foo2Bar"] {
  background: red;  
}

<div id="root">
  <div id="rootRootWidget" style="Y1">
    <div id="rootRootWidgetWidget" style="Y2">
      <div id="rootRootWidgetWidgetFoo" style="Y3">1</div> 
      <div id="rootRootWidgetWidgetFoo1" style="Y4">2</div>
      <div id="rootRootWidgetWidgetFoo2" style="Y5">
        <div id="rootRootWidgetWidgetFoo2Bar" style="Y6">3</div>
        <div id="rootRootWidgetWidgetFoo2Bar1" style="Y7">4</div>
      </div>
    </div>
    <div id="rootRootWidgetWidget1" style="Y8">
      <div id="rootRootWidgetWidget1Foo" style="Y9">5</div>
    </div>
  </div>
</div>

是否可以使用＆＃34;类似＆＃34; CSS中的ID？

2 个答案: