带标签的 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$='horizo​​ntaldropdownmenu'] 选择 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;
}