有沒有辦法在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標記樣式標籤？

回答

相關問題