具有标记的CSS部分属性选择器

我正在重新考虑一些CSS代码，并且想知道是否有人可以帮助我解决这个问题。具有标记的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; 
}

来源

2014-10-16 Naomi Owens

你自己回答的问题。

由于div[id$='horizontaldropdownmenu']选择其id与“horizontaldropdownmenu”结尾的所有元素，你可以应用相同的逻辑来的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; 
}

来源

2014-10-16 12:56:23

谢谢，这是正确的。在发布之前，我已经自己尝试过了。我遇到问题的原因是因为当我使用这种方法时，我的CSS被覆盖，但当我指定单独的id选择器时没有被覆盖。我只是假设我的CSS是错误的。 – 2014-10-16 14:08:36

取决于你的代码的其他部分，但你可以这样的事情：

[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

来源

2014-10-16 12:54:54 enguerranws

“使用相同的逻辑”

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; 
}

很容易为：后代选择器添加到您的属性选择年底目标子元素

来源

2014-10-16 12:59:04 thetont

具有标记的CSS部分属性选择器

回答

相关问题