Почему не видит свойство?

Question

[maestro07]

<nav id="site-navigation" class="main-navigation" role="navigation">
        <ul>
            <li class="selected"><a href="#home">Home</a></li>
            <li><a href="#about">About us</a></li>
            <li><a href="#team">Team</a></li>
            <li><a href="#vehicle">Vehicle</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#sponsors">Sponsors</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </nav><!-- #site-navigation -->

.selected a {
	color: #DEAF5A;
}
#site-navigation {
	min-height: 50px;
	width: 100%;
	background: #853636;
	border-top: 1px solid #e1e1e1;
}

.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

.main-navigation ul {
	position: relative;
	z-index: 999999;
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	display: inline-block;
	float: left;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

.main-navigation ul li a {
	font-size: 16px;
	display: block;
	text-decoration: none;
	-webkit-transition: all 0.3s linear 0s;
	-moz-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
	color: #F1EFEB;
	padding: 0px 63px;
	line-height: 4em;
}

как решить? чтобы был selected

Comments

[V Sh.]

Ну так что-то перекрывает стиль. Посмотрите что. Увеличьте специфичность.

[Владислав Лысков]

.selected a {
  color: #DEAF5A !important;
}

как 1 из вариантов

[V Sh.]

вот так не перекроет: .main-navigation ul li.selected a

[V Sh.]

Владислав Лысков, никогда такое никому не советуйте. Разве что людям, которые мучаются с SharePoint... Там без этого никуда)

[Владислав Лысков]

V Sh., да я знаю что это плохо, ладно, больше не буду плохое советовать :)

Answer 1

[Astrohas]

#site-navigation li.selected a {
  color: #DEAF5A;
}

https://jsfiddle.net/9xbe08dp/
и почитайте про вес селекторов (https://habrahabr.ru/post/137588/ )

Answer 2

[ой всё]

никогда не используйте id элементов в css без крайней необходимости типа интеграции чужого кода с вашей страницей
каскадности тэгов и классов в css с лихвой хватает для всех задач, если, конечно, один раз разобраться с тем, как это работает

Comments

[Одиночка Айс]

Порой бывает просто лень писать всю цепочку, чтобы переопределить свойство. "Не пользуйтесь id" - совет от тех, кто просто не умеет ими пользоваться))

[ой всё]

Одиночка Айс, совет от тех, кто не переписывает цепочки

[Одиночка Айс]

ой всё, )))

[ой всё]

Одиночка Айс, мы давеча заставили подрядчиков переписать весь css, тоже такие знатоки id попались, как вы
два дня колупались, злились страшно

[Одиночка Айс]

ой всё, а кто вам сказал, что им все умеют пользоваться? я согласен, с ним много проблем, но при использовании нужно включать мозг. Короче, очередной холивар)

[ой всё]

Одиночка Айс, зачем уметь, если можно вообще его не писать?
это не холивар, а ваша неопытность
если бы вы участвовали в больших проектах со множеством разных исполнителей, то сами бы отказались от id, потому что это совершенно пустая трата времени и денег
уже не говоря о том, что смена id в html и js ломает все, что вы с таким знанием дела построили, и чаще всего чинить и материться приходится не вам, а кому-то другому

[Одиночка Айс]

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

[ой всё]

Одиночка Айс, так не пишите лапшу, для организации стилей есть каскадные классы, их освоить куда проще, чем переписывать бесконечные хвосты с id, особенно, если вам нужно встроить какой-либо плагин или инструмент с собственным css

id может измениться по любой причине, особенно там где данные грузят динамически, но это не должно создавать вам ненужные риски, вы вообще не должны об этом думать и тем более тратить время на такие конфликты

[Одиночка Айс]

ой всё, спасибо, Вашу точку зрения понял

Answer 3

[Александр Nameless08]

По селекторам ситуация следующая. Условно можно приоритеты рассматривать по четырем весовым уровням: [0:0:0:0], первый самый высокий, последний самый низкий т.е. [1:0:0:0] > [0:a:b:c] > [0:0:b:c] > [0:0:0:c]:

1. Стили через атрибут «style=""» имеют наибольший приоритет и получают единицу по первой позиции — [1:0:0:0];
2. За каждый идентификатор элемента — [0:1:0:0];
3. За каждый класс/псевдо класс — [0:0:1:0]
4. За каждый тег — [0:0:0:1] .
Также есть директива !important перебьет все вышеописанное.
Соответственно, при равенстве счета последний главный.