有没有办法在CSS中使用“相似”ID标记样式标签？

我通过，广泛，被格式化像这样一个专有的图形包创建的XML文件：有没有办法在CSS中使用“相似”ID标记样式标签？

<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 /码头巫术，将上面的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页面。我希望能够使用此样式表将样式应用于所有的Widget/Widget1/Widget2（等）的RootWidget父母或Widget/Widget1/Widget2（等）的Foo/Foo1/Foo2（等）孩子的父母或所有Bar/Bar1/Bar2（等）孩子的Widget/Widget1/Widget2（等）父母，但不是Foo/Foo1/Foo2（等）父母，等等。我如何使用我的软件提供的HTML格式来做到这一点？

来源

2016-05-31 Frank

基于给定结构的我会选择suffix属性选择[id$="value"]（因为他们都期待在年初同）的contain选择div[id*="value"]和。

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>

来源

2016-05-31 19:03:56 LGSon

当你说“搞砸了”时，这是否意味着没有办法让选择器不删除点而工作？我无法删除这些点，它们是由我无权访问的黑盒程序自动生成的。 – Frank

@Frank：不，我想说的是某些浏览器可能无法按预期工作，但我现在看到，当我在IE11中再次测试时，它可以工作......当我第一次尝试时，它一定是别的东西，更新并在我的答案中删除了这个建议。 – LGSon

是的！

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

在你的情况，我觉得选择将

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

来源

2016-05-31 18:16:06

我觉得你的选择不工作。首先，HTML文档没有类，所以'.root-widget'不会选择任何东西。另一方面，'attribute^= value'转换为''attribute'以'value'开始，它与HTML中的'id'不匹配，它将以（例如）''root.RootWidget开头。窗口小部件“'。我在这里误解CSS吗？ – Frank

有没有办法在CSS中使用“相似”ID标记样式标签？

回答

相关问题