Question

我正在重新考虑一些CSS代码，我想知道是否有人可以帮助我。

我想基于其id属性的子字符串设置多个元素的样式，例如后缀'horizontaldropdownmenu'

这可以按预期工作：

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以＆＃34; horizontaldropdownmenu＆＃34;结尾的所有元素时，您可以将相同的逻辑应用于其他两个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 */
}

这意味着：定位ID为以＆＃39; ctl00_cphLogo_C0＆＃39;开头的所有元素。不确定这可以适用于你的情况。

这里有一些关于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;
}

这很容易：将后代选择器添加到属性选择器的末尾以定位子元素

带标签的CSS部分属性选择器

3 个答案: