Как стилизовать панель пагинации, урок 20 codeigniter ?

Всем привет.

В 20 уроке, автор дает готовый код для стилизации пагинации.

//pagination bootstrap
$p_config['full_tag_open'] = "<ul class='pagination'>";
$p_config['full_tag_close'] ="</ul>";
$p_config['num_tag_open'] = '<li>';
$p_config['num_tag_close'] = '</li>';
$p_config['cur_tag_open'] = "<li class='disabled'><li class='active'><a href='#'>";
$p_config['cur_tag_close'] = "<span class='sr-only'></span></a></li>";
$p_config['next_tag_open'] = "<li>";
$p_config['next_tagl_close'] = "</li>";
$p_config['prev_tag_open'] = "<li>";
$p_config['prev_tagl_close'] = "</li>";
$p_config['first_tag_open'] = "<li>";
$p_config['first_tagl_close'] = "</li>";
$p_config['last_tag_open'] = "<li>";
$p_config['last_tagl_close'] = "</li>";

Хотел изменить цвет, задал в СSS свойства

.pagination > li > a
{
background-color: white;
color: purple;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
color: purple;
background-color: #eee;
border-color: #ddd;
}

.pagination > .active > a
{
color: white;
background-color: purple;
border: solid 1px purple;
}

.pagination > .active > a:hover
{
background-color: purple;
border: solid 1px purple;
}

Дописывал !important. Никак не реагирует.

Каким же образом можно отформатировать имеющийся код стилизации пагинации?

Спасибо.

codeigniter

3 ответов

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{

Мне кажется, что у вас селекторы неправильно заданы, можно так попробовать, добавив ul:

.pagination>ul>li>a:focus,
.pagination>ul>li>a:hover,
.pagination>ul>li>span:focus,
.pagination>ul>li>span:hover
{

Спасибо, student_eY-T1f6I.

Нашел бутсраповские стили. В панели разработчика их подогнал под желаемый вид. Добавил стили в свой файл стилей, дописал импортант - не работает.

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #f0ad4e !important;
    border-color: #f0ad4e !important;
}

Изменил стили в самом файле бутсрапа - все равно, по прежнему, синий цвет. Отключил бутсраповский сss - развалилась верстка! Путь подключения моих стилей верный, он подключен после бутсраповких стилей!

Еще поищу причину, чего это мои стили не подтягивает!

Все заработало! согласно вышеуказанному коду.