具有標記的CSS部分屬性選擇器

Question

我正在重新考慮一些CSS代碼，並且想知道是否有人可以幫助我解決這個問題。

我想根據其id屬性的子字符串來設置多個元素的樣式，例如帶有後綴 'horizo​​ntaldropdownmenu'

這按預期工作：

div[id$='horizontaldropdownmenu']{ 
    padding-left: 25px; 
    padding-top: 40px; 
} 

使用相同的邏輯。我怎麼會做這樣的：

#ctl00_cphLogo_C016_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a 
,#ctl00_cphLogo_C017_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a 
,#ctl00_cphLogo_C022_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a 
,#ctl00_cphLogo_C020_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a 
,#ctl00_cphLogo_C039_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a 
,#ctl00_cphLogo_C026_ctl00_ctl00_siteMapControl_horizontaldropdownmenu li a:hover, #menu .active a{ 
    color:#F15A28 
} 

或本：

#ctl00_cphLogo_C016_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a 
,#ctl00_cphLogo_C017_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a 
,#ctl00_cphLogo_C022_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a 
,#ctl00_cphLogo_C020_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a 
,#ctl00_cphLogo_C039_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a 
,#ctl00_cphLogo_C026_ctl00_ctl00_siteMapControl_horizontaldropdownmenu a{ 
    font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #696969; 
    line-height: 1.2em; 
} 

Answer 1

你自己回答的問題。

由於div[id$='horizontaldropdownmenu']選擇其id與「horizo​​ntaldropdownmenu」結尾的所有元素，你可以應用相同的邏輯來的CSS與其他兩件：

div[id$='horizontaldropdownmenu'] li a:hover, #menu .active a { 
    color:#F15A28 
} 

div[id$='horizontaldropdownmenu'] a { 
    font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #696969; 
    line-height: 1.2em; 
} 

Answer 2

取決於你的代碼的其他部分，但你可以這樣的事情：

[id^=ctl00_cphLogo_C0'] a{ 
    /* some css */ 
} 
[id^=ctl00_cphLogo_C0'] a:hover{ 
    /* some css */ 
} 

這意味着：使用以「ctl00_cphLogo_C0」開頭的ID定位所有元素。不確定這可以在你的情況下工作。

下面是關於CSS高級選擇一些文檔：http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Answer 3

「使用相同的邏輯」

div[id$='horizontaldropdownmenu'] li a:hover, 
#menu .active a{ 
    padding-left: 25px; 
    padding-top: 40px; 
} 

和

div[id$='horizontaldropdownmenu'] horizontaldropdownmenu a{ 
    font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #696969; 
    line-height: 1.2em; 
} 

很容易爲：後代選擇器添加到您的屬性選擇年底目標子元素