CSS Partial Attribute Селекторы с тегами

Я перефазирую код CSS, и мне интересно, может ли кто-нибудь помочь мне с этим.CSS Partial Attribute Селекторы с тегами

Я хочу создать несколько элементов на основе подстроки их атрибута 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 был переопределен, когда я использовал этот метод, но не тогда, когда я указал отдельные селекторы. Я просто предположил, что мой CSS ошибочен. –

Опираться на другие части вашего кода, но вы могли бы что-то подобное:

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

Это означает: укажите все элементы с идентификатором, который начинается с 'ctl00_cphLogo_C0'. Не уверен, что может работать в вашем случае.

Вот некоторые документы о 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 Partial Attribute Селекторы с тегами

ответ

Смежные вопросы