Я использую следующие классы псевдо:Нужно ли указывать каждое состояние цвета ссылки?
a.recentposttitle:link,a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}
a.recentposttitle:active {color:#000;}
Нужно ли быть, что явно или есть более сжатый способ получить тот же результат?
В CSS нет сокращенного селектора для псевдоклассов якорей/ссылок. Так что у вас есть довольно хорошо, как вы можете получить.
a:link{ Declarations }
a:visited{ Declarations }
...
a:hover{ Declarations }
a:active{ Declarations }
Мне нужно найти ссылку я ранее читал, чтобы подтвердить это, но AFAIK, то :link псевдо-селектор необходимо только, если вы используете страницы якорей старого стиля (<a name="..."></a>) , поэтому вы должны быть в состоянии безопасно устранить это. Поскольку ваши :active и :visited правила те же, вероятно, можно сократить, что вы показали это:
a.recentposttitle:active, a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}
Но вы на самом деле не экономить, что много байт, так трудно сказать, если это стоит.
Порядок 'псевдо-классов 'важен, поэтому': active' должен быть после ': hover'. Поэтому ссылки не становятся черными при нажатии на них. Проверьте это [FIDDLE] (http://jsfiddle.net/mojtaba/X5kTE/). –
@NOX Odd - jsFiddle, с которым вы связались, работает для меня (щелчок по ссылке заставляет цвет быть черным, когда он не витает). Возможно, мне нужно создать рабочую демонстрацию, чтобы увидеть, что работает с реальными ссылками. Спасибо за вход! –
Нажмите и удерживайте кнопку мыши. Ссылка должна быть черной в то время;) –
Нет, сокращений нет. Но ваши селекторы могут быть:
a {}
выбрать все links, или:
.recentposttitle {}
, чтобы получить все .recentposttitle элементы (мы знаем, что они есть ссылки уже есть).
И еще одна вещь, :link не нужно на самом деле, вы можете написать:
a {}
a:visited {}
a:hover {}
a:active {}
Когда вы пишете a {}, вы будете установить декларацию для всех возможных ситуаций, так:
a {}
То же, что и:
a:link, a:visited, a:hover, a:active {}
pseudo classes являются ВАЖНАЯ:
'a' и' a: link' не совсем идентичны. 'a: link' выбирает все элементы привязки, которые на самом деле являются связями' ', тогда как' a' также выбирает элементы привязки без атрибута href. – knittl
Спасибо за полезный комментарий ':)'. –
Я не полностью следую вашему примеру. Вы удалили класс .recentposttitle. Таким образом, ваш код имеет большую цель ... правильно? – 4thSpace
Вы можете сжать его с помощью CSS-фреймворков, таких как LESS или SASS.
Как из вашего примера,
CSS-:
a.recentposttitle:link,a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}
a.recentposttitle:active {color:#000;}
Например, если вы используете SASS вы можете сжать его до ..
a.recentposttitle {
color: #000;
&:link{ color: #000; }
&:hover { color: #56A49F; }
&:visited { color: #000; }
&:active{ color: #000; }
}
Вы также можете используйте Emmet, ранее известный как Zen coding для максимального сжатия кода.
Надеюсь, что это поможет.
Для стабильного результата вы должны это сделать – edd
Явное использование будет хорошим. Так что вы можете ориентироваться на определенные области. @ 4thspace –