簡化CSS聲明？

我正在構建一個joomla網站，我遇到了一個CSS語句的問題。該網站使用了幾個不同名稱的菜單。正因爲如此，我會做這樣的事情：簡化CSS聲明？

a#ext-gen1.ux-menu-link-level-0.ux-menu-link-parent.current, 
a#ext-gen2.ux-menu-link-level-0.ux-menu-link-parent.current, 
a#ext-gen3.ux-menu-link-level-0.ux-menu-link-parent.current, 
a#ext-gen4.ux-menu-link-level-0.ux-menu-link-parent.current { 
    //... 
}

爲了簡化這個問題，我想用*，如果該語句像貝殼指令處理該會的工作更換的數字。結果會是這樣的：

a#ext-gen*.ux-menu-link-level-0.ux-menu-link-parent.current {  
    //... 
}

不幸的是，這是行不通的。那麼CSS在CSS中的工作方式如何呢？

編輯：HTML的文件看起來是這樣的，如果是重要的：

<a href="./some/link.html" class=" ux-menu-link-level-0 current ux-menu-link-parent " title="" id="ext-gen5"> 
some text 
</a>

來源

2014-10-18 Exceen

爲什麼不僅選擇類？ '.ux-menu-link-level-0.ux-menu-link-parent.current { ... }' – xjedam 2014-10-18 13:19:32

因爲這是行不通的。我需要告訴樣式表，它是一個鏈接。在你的例子中，缺少「a」。 – Exceen 2014-10-18 13:26:10

不知道爲什麼它不起作用，但可以添加'a'選擇器：'a.ux-menu-link-level-0.ux-menu-link-parent.current {...}' – xjedam 2014-10-18 13:31:43

您可以嘗試在「開始」 CSS選擇器。這將選擇所有具有以「ext-gen」開頭的「id」的元素。

a[id^="ext-gen"] {}

來源

2014-10-18 13:20:49 Rob

我真的不知道如何正確實現這一點，如果我只是複製並粘貼這個，它不起作用。 – Exceen 2014-10-18 13:26:51

@Exceen編輯CSS的原因我沒有使用你的確切起始編號名稱。 – Rob 2014-10-18 13:28:46

這可能會被某些ID選擇器覆蓋，因爲它具有較少的特定性。 @Exceen你應該使用你的瀏覽器的開發工具，看看是否是這種情況 – 2014-10-18 13:43:07

a.ux-menu-link-level-0.ux-menu-link-parent.current{}應該沒問題。

div.b { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
} 
 
div#d1 { 
 
    background: red; 
 
}

<div class="b" id="d1"></div> 
 
<div class="b" id="d2"></div>

來源

2014-10-18 13:33:40 DividedByZero

是的，我知道它*應該*工作，但它不。我真的不知道爲什麼...... – Exceen 2014-10-18 13:37:45

簡化CSS聲明？

回答

相關問題