текст в <span> не наследует стили из класса

Question

Интересно, может ли кто-нибудь помочь мне или указать мне в правильном направлении, чтобы я мог решить мою проблему.

У меня есть список, который получил класс присвоен

<ul class="link-list nav"> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
    <li><a href="#">Menu 4</a></li> 
</ul> 

Связь-лист нав выглядит, как показано ниже:

.link-list { 
    display: inline-block; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    font-size: 12px; 
} 
.link-list > li { 
    display: inline-block; 
} 
.link-list > li > a { 
    display: block; 
    padding: .9em 1.6em; 
    /*margin: top right bottom left; 
    border: 1px solid white;*/ 
    text-decoration: none; 
    color: white; 
} 
.link-list > li > a:hover { /* :hover, :focus, :blur */ 
    color: pink; 
} 

.link-list.nav > li > a { 
    font-weight: bold; 
} 

Так что теперь список был отформатирован, как это должно быть

Правильные цвета:

, но когда я пытаюсь сделать первый элемент списка большего встраивая пролетных тегов и изменения выше кода:

<ul class="link-list nav"> 
    <li><span style="font-size: large"><a href="#">Menu 1</a></span></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
    <li><a href="#">Menu 4</a></li> 
</ul> 

Шрифт становится больше, но и все другое форматирование исчезают

Неправильные цвета :

Я экспериментировал с определением другого класса, который унаследует от канального списка нав но unsucce ssfully. Любые предложения, пожалуйста?

Заранее спасибо, С уважением, Том.

Answer 1

• вы можете поставить span, как ребенок a данного ваш CSS (вы используете прямой селектор дочерних >).

или

• вы можете просто использовать селектор CSS first-child в li

или

• или просто удалив >, что делает его ребенка (не прямой один) ,

.link-list { 
 
    display: inline-block; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 12px; 
 
} 
 
.link-list > li { 
 
    display: inline-block; 
 
} 
 
.link-list > li > a { 
 
    display: block; 
 
    padding: .9em 1.6em; 
 
    /*margin: top right bottom left; 
 
    border: 1px solid white;*/ 
 
    text-decoration: none; 
 
    color: red; 
 
} 
 
.link-list > li > a:hover { 
 
    /* :hover, :focus, :blur */ 
 
    color: pink; 
 
} 
 
.link-list.nav > li > a { 
 
    font-weight: 700; 
 
} 
 
/* use this */ 
 

 
.link-list.nav > li > a span { 
 
    font-size: 20px 
 
} 
 
/* or use this */ 
 

 
.link-list.nav > li:first-child > a { 
 
    color: blue 
 
}

<ul class="link-list nav"> 
 
    <li><a href="#"><span>Menu 1</span></a> 
 
    </li> 
 
    <li><a href="#">Menu 2</a> 
 
    </li> 
 
    <li><a href="#">Menu 3</a> 
 
    </li> 
 
    <li><a href="#">Menu 4</a> 
 
    </li> 
 
</ul>

Answer 2

Селекторы больше не соответствуют, потому что <a> больше не является дочерним из <li>.

Используйте descendant combinator (пробел) вместо child combinator (a >).

---

В качестве альтернативы, поместите пролет внутри самого внутреннего элемента, чтобы он не нарушил дочерние комбинаторы.

---

В качестве альтернативы, возможно, лучший вариант, не добавляйте дополнительный элемент вообще. Вы хотите стилизовать весь текст там, поэтому примените CSS к всему элементу.

Answer 3

Спасибо Квентин и dippas для быстрых ответов.

Из обоих решений, я пошел для создания:

.link-list.nav > li > a span { 
    font-size: 20px 
} 

и изменение

<li><span><a href="#">Menu 1</a></span> 

в

<li><a href="#"><span>Menu 1</span></a> 

Это полностью решить мою проблему. Очевидно, мне нужно обратиться к статьям о наследовании.

Еще раз спасибо и заботьтесь, ребята!