Я бегаю по кругу с заданием CSS, поэтому позвольте мне обратиться за помощью к этой конкретной проблеме.CSS: Стиль для сухаря (очень специфично)

Существует HTML-пачка, выходящая из CMS (т. Е. Внешняя система, которую я не могу изменить), которую я бы хотел создать.

Он должен выглядеть следующим образом:

T1 BOLD>T2 BOLD, когда он в последний раз, NORMAL, когда это не последний> T3 NORMAL, если она существует

Так крошка может быть 2 элемента или 3, но последний элемент всегда должен иметь font-weight: normal.

HTML, выглядит следующим образом (остерегайтесь: к сожалению, я не могу изменить это странное HTML):

<div class="breadcrumb"> 
    <span> 
     <a href="#"> 
      <span>T1 bold</span> 
     </a> › 
    </span> 
    <a href="/"> 
     <span>T2 should be bold, because it's not last</span> 
    </a> › 
    <span>T3 normal</span> 
</div> 

<div class="breadcrumb"> 
    <span> 
     <a href="#"> 
      <span>T1 bold</span> 
     </a> › 
    </span> 
    <a href="/"> 
     <span>T2 should be normal, because it's last</span> 
    </a> 
</div>

Я попробовал этот CSS, но он не работает так, как я хочу его.

.breadcrumb>span:last-child, #breadcrumb>a:last-child { 
    font-weight: normal !important; 
} 

.breadcrumb>a span { 
    font-weight: bold; 
}

JSFiddle здесь: https://jsfiddle.net/uk4q2cvu/

Вопрос заключается в том: что CSS будет вызывать все элементы в навигационной цепочке должны быть смелыми, за исключением последнего пункта - который должен быть шрифт веса нормального

Любая помощь будет очень высоко ценится.

Благодаря Бернхард

источник

2015-12-17 Bernie

У меня действительно трудно понять, что речь идет. – j08691

Вопрос в том, что css приведет к получению всех элементов в breadcrumb, кроме последнего элемента, который должен быть нормальным шрифтом –

j08691 и cale_b: я обновил сообщение с явным вопросом. Благодарю. – Bernie

Updated Fiddle

:last-child получает работу, независимо от того, является ли это пролет или а:

.breadcrumb > * { 
    font-weight: bold; 
} 

.breadcrumb > *:last-child { 
    font-weight: normal; 
}

источник

2015-12-17 17:35:52

Замечательный, он работает. Спасибо! Я очень много играл с последним ребенком, но у меня не было *: последний ребенок. Отлично. – Bernie

Вот чистое обновление вашего примера:

.breadcrumb { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.breadcrumb > li { 
 
    display: inline; 
 
} 
 

 
.breadcrumb > li:not(:last-child) { 
 
    font-weight: bold; 
 
} 
 

 
.breadcrumb > li:not(:last-child):after { 
 
    content: " › "; 
 
    display: inline; 
 
}

<ul class="breadcrumb"> 
 
    <li><a href="#">T1 Bold</a></li> 
 
    <li><a href="#">T2 Bold</a></li> 
 
    <li>T3 Normal</li> 
 
</ul> 
 

 
<ul class="breadcrumb"> 
 
    <li><a href="#">T1 Bold</a></li> 
 
    <li>T2 Normal</li> 
 
</ul>

источник

2015-12-17 17:40:25 Thomas

«Остерегайтесь: к сожалению, я не могу изменить этот странный HTML» - OP – Pevara

как-то пропустил эту часть, извините. – Thomas

Все еще поддерживается, потому что это хороший способ достичь этого же конца. –

Два простые правила:

.breadcrumb a { 
font-weight: bold; 
} 

.breadcrumb a:last-of-type { 
font-weight: normal; 
}

Первое правило жирным шрифтом все .breadcrumb якоря.

Второе правило раскрывает последний якорь в каждой серии .breadcrumb.

=====

Еще лучше, вот одно правило, которое достигает того же результата:

.breadcrumb a:nth-of-type(n-1) { 
font-weight: bold; 
}

источник

2015-12-17 17:47:29 Rounin

CSS: Стиль для сухаря (очень специфично)

ответ

=====

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