有没有办法用“设置标签样式”的方法；类似的“；CSS中的ID？

我有一个通过专有图形包创建的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（etc）子级，或Widget/Widget1/Widget2（etc）父级的所有Foo/Foo1/Foo2（etc）子级，或Widget/Widget1/Widget2（etc）父级的所有Bar/Bar1/Bar2（etc）子级，但不是Foo/Foo1/Foo2（etc）父级，等等。我怎样才能用我的软件中的HTML格式做到这一点呢？

是的

只需使用

元素[attribute^=value]

标记

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

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

是的

只需使用

元素[attribute^=value]

标记

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

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

---

根据给定的结构，我将选择

后缀

属性选择器

[id$=“value”]

（因为它们在开始时看起来都一样），并且

包含
选择器
div[id*=“value”]


div[id$='RootWidget']div{
保证金：2倍；
填充：0px 30px；
边框：1px实心；
}
div[id$=“Foo”]{
背景：绿色；
}
div[id*=“Foo2Bar”]{
背景：红色；
}

1.
2.
3.
4.
5.
基于给定的结构，我将选择
后缀
属性选择器
[id$=“value”]
（因为它们在开始时看起来都一样），并且
包含
选择器
div[id*=“value”]


div[id$='RootWidget']div{
保证金：2倍；
填充：0px 30px；
边框：1px实心；
}
div[id$=“Foo”]{
背景：绿色；
}
div[id*=“Foo2Bar”]{
背景：红色；
}

1.
2.
3.
4.
5.
我认为您的选择器不起作用。首先，HTML文档没有类，因此
.root小部件
不会选择任何内容。另一方面，
attribute^=value
转换为“
attribute
以
value
开头”，这与HTML中的
id
不匹配，后者将以（例如）
“root.RootWidget.Widget”
开头。我是不是误会了CSS？我想你的选择器坏了。首先，HTML文档没有类，因此
.root小部件
不会选择任何内容。另一方面，
attribute^=value
转换为“
attribute
以
value
开头”，这与HTML中的
id
不匹配，后者将以（例如）
“root.RootWidget.Widget”
开头。我是不是误解了CSS？当你说“搞糟”时，这是否意味着如果不去掉这些点，就无法让选择器工作？我无法删除这些点，它们是由一个我没有源代码访问权限的黑盒程序自动生成的。@Frank:不，我的意思是有些浏览器可能无法按预期工作，但我现在明白了，当我在IE11中再次测试时，它可以工作了。。。当我第一次尝试、更新并删除我的答案中的建议时，一定是其他原因。当你说“搞糟”时，是否意味着如果不删除点，就无法让选择器工作？我无法删除这些点，它们是由一个我没有源代码访问权限的黑盒程序自动生成的。@Frank:不，我的意思是有些浏览器可能无法按预期工作，但我现在明白了，当我在IE11中再次测试时，它可以工作了。。。当我第一次尝试，更新并删除我的答案中的建议时，一定是其他原因。