coding
Я пишу css-правило
.nav-users < color: red; >
но на странице нечего не меняется: цвет остаётся серым.
Ответ
Браузеры предоставляют отличные инструменты для отладки css. Не надо ждать, пока кто-то угадает, в чём проблема. Надо просто взять и посмотреть, что же происходит. Покажу на примере Хрома.
Сначала надо обновить страницу со сбросом кэша. В большинстве браузеров это Ctrl + F5
Если не помогло, то по исследуем по следующему плану:
Щёлкнуть проблемный элемент правой кнопкой и выбрать пункт Исследовать элемент
Появится панель отладки, на которой на вкладке Elements выделен кликнутый элемент. Если нужен другой, можно перейти к нему. Затем следует обратить внимание на вкладки Styles и Computed
Если в element.style есть интересующее свойство, то
если в html-разметке прописан стиль в атрибуте style, удаляем оттуда лишнее если нет, кончаем читать этот ответ и переходим к отладке скриптов, которые этот стиль выставляют (либо перебиваем !importantом, что делать крайне не рекомендуется)
На вкладке Styles надо найти свой селектор. Если его там нет, то проблема в опечатке или подключении css-файла.
Как видим, свойство зачёркнуто, но восклицательного знака (говорящего о неверном значении) нет. Это означает, что есть другое правило, имеющее больший приоритет. В простых случаях достаточно посмотреть на вышестоящие правила и понять, что там надо. В более запутанных стоит заглянуть на вкладку Computed и посмотреть, какие вообще значения влияют:
Здесь видно, что селектор .so-header .navigation .-link перебивает наше правило. Кликом по стрелочке можно перейти к самому правилу, но нам это сейчас не нужно.
Теперь мы знаем, что приоритет используемого правила 0 id, 3 класса, 0 тегов Если мы уверены, что наше правило идёт после переопределяемого, то нам достаточно той же силы. Если нет, то надо побольше.
Самый простой способ — это сделать так:
.nav-users.nav-users.nav-users.nav-users < color: red; >
Но руководствуясь здравым смыслом, стоит всё-таки сделать так:
.so-header .navigation .nav-users < color: red; >
или так:
.so-header .navigation .-link.nav-users < color: red; >
Должно заработать:
Если всё равно не работает.
На шаге 6 стоило заглянуть в переопределяющий стиль — возможно, в нём есть !important
В таком случаем нам тоже придётся его использовать:
.so-header .navigation .-link.nav-users
Html не видит класс CSS
Здравствуйте!
Я пытаюсь сделать выдвигающийся список. Элементы списка должны быть находится поверх контента страницы. Но HTML не видит класс CSS (jsnav) с z-index, хотя остальные CSS классы работают. Подскажите, пожалуйста, где у меня ошибка?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
html> head> meta charset="utf-8"> link href="css/bootstrap.css" rel="stylesheet"> link href="CSS/style.css" rel="stylesheet"> /head> body> div class="container-fluid"> h1>Главная страница/h1> nav> div class="row" align="center"> div class="col-xs-3">a href="#">Пункт 1/a>/div> div class="col-xs-3">a href="#">Пункт 2/a>/div> div class="col-xs-3">a href="#">Пункт 3/a>/div> div class="col-xs-3">a href="#">Пункт 4/a>/div> /div> div class="row" align="center"> div class="col-xs-3"> div class="jsnav"> hr> div>a href="#">Пункт 2/a>/div> /div> /div> /div> div class="row" align="center"> div class="col-xs-3"> div class="jsnav"> hr> div>a href="#">Пункт 3/a>/div> /div> /div> /div> div class="row" align="center"> div class="col-xs-3"> div class="jsnav"> hr> div>a href="#">Пункт 4/a>/div> /div> /div> /div> hr> /nav> p>Текст/p> /div> /body> /html>
#jsnav { position: relative; z-index: 100; }
HTML не видит файл CSS
Всем привет! Друзья, очень нужна помощь. Я начинающий программист , только изучаю всё. Решил.
HTML файл не видит CSS стилей
Всем привет. Имеются 2 HTML-файла с блочной версткой, оба они индеентичны, разве что контент в них.
Html не видит css из другой папки
Есть RegistrationPage.html <html> <link rel="stylesheet".
Старые добрые HTML и CSS или новые HTML 5 и CSS 3?
Здравствуйте ) Дело собственно вот в чем. Я хочу на лето заняться изучением создания сайтов. .
.jsnav { position: relative; z-index: 100; }
Сообщение от HitGirl 
не работают классы
Разбираюсь с гибкой сеткой и возникла проблема. К некоторым елементам прописано 2 класса сразу и почему-то один из них не срабатывает. Ниже код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
html> head> meta charset="UTF-8"> meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> meta name="viewport" content="width-device-width, initial-scale=1.0"> meta name="description" content=""> meta name="author" content=""> link rel="shortcut icon" href="images/favicon.ico"/> title>Aдаптивная страничка/title> link rel="stylesheet" href="css/style.css"/> link rel="stylesheet" href="css/animate.css"> /head> body> div class="container"> div class="cols col-4">four/div> div class="cols col-4">four/div> div class="cols col-4">four/div> /div> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
*{ padding: 0; margin: 0; } body{ font: 100%/1.5em Arial, Hevletica, sans-serif; color:#000; } .container{ width: 90%; margin: 0 auto; background-color: lightpink; } .container .cols{ float:left; margin:0 0 1em; padding:0 1em; background-color: antiquewhite; text-align: center; } .container .cols .col-1{width:8.333333333%;} .container .cols .col-2{width:16.666666666%;} .container .cols .col-3{width:25%;} .container .cols .col-4{width:33.33%;} .container .cols .col-5{width:41.666666667%;} .container .cols .col-6{width:50%;} .container .cols .col-7{width:58.333333333%;} .container .cols .col-8{width:66.666666667%;} .container .cols .col-9{width:75%;} .container .cols .col-10{width:83.333333333%;} .container .cols .col-11{width:91.666666667%;} .container .cols .col-12{width:100%;}
Html не видит css класс
Здравствуйте. в CSS ноль, но путем проб и ошибок что-то изменить получается, иногда действуя по аналогии, НО!
Есть такая часть кода:
Что нужно вписать в CSS чтобы строку «Результат 52 шт» выделить цветом?
Перепробовал почти все варианты типа итд
вписывал в файл CSS темы
#wpcc_result
.wpcc_field_result_1
.wpcc_result
.wpcc_result_block wpcc_result_block_1
НЕ ХОЧЕТ тварь, менять свой цвет! ПОМОГИТЕ!
чтобы не гадать нужно этому просто научиться, а метод проб и ошибок это не вариант, он пригодиться тогда когда вы уже будете что-то уметь.
а по вопросу —
.wpcc_field_result_1 вот это у вас должно было сработать
если на сработало проверьте подключен ли css файл правильно
Да это понятно. Но, если все учить, для того чтобы решить какую-то мелкую проблему, то жизни не хватит. По вашему получается, чтобы никого здесь не отвлекать мне следовало купить пару книг и потратить пару месяцев, чтобы текст покрасить, это круто.
Нарисовалась одна проблема. Не получается отдельное radio в строку выстроить. Их у меня несколько. Третья кнопка в ряд не становится. Может подскажете в чем дело?
.wpcc_radio label width:50%; /*ширина блоков с картинками*/
float:left; /* обтекание по левому краю*/
text-align:center; /*выравнивание текста по центру*/
>
.wpcc_radio_39 height:200px;
float:None; /* обтекание по левому краю*/
border: 5px #ccc solid;
>
Почему в этой связке класс .wpcc_radio_39 работает частями? На изменения height:, border:,width: реагирует, а float:None; чтобы сбросить родительские настройки не работает? Как сбросить все настройки ОТ .wpcc_radio label для .wpcc_radio_39 и написать свое, чтобы работало именно для класса .wpcc_radio_39?
Не работает class
Class Matrix почему не работает?
Не могу найти в чём проблема, вроде всё должно работать. using System; using.
Объясните как работает Class внутри темы
Не могу понять логически как работает данный класс: class Message @@messages_sent = 0 .
Это просто внутри php. Если даже вынести отдельно html с двойными кавычками все равно не работает. Сделал экранирование кавычек в php, то же не работает.
Я только что попробовал в online редакторе, все работает, появляется синий фон.
ul id="nav"> li class='active'>a href='#'>/a>/li> /ul>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
#nav { font-size: 15px; font-family: Tahoma, sans-serif; } #nav li a { outline: none; text-decoration: none; display: block; color: #ffffff; background-color: #f4735e; float: left; padding: 15px 15px; } .active { background-color: blue; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
if (location.pathname === '/welcome' || location.pathname === '/welcome/') { location = '/welcome/edit?html,live'; } if (window.location.pathname.indexOf('/edit') !== -1) $('a.open').click(function (event) { event.preventDefault(); window.top.$('a[href$="' + this.hash + '"]').mousedown().click(); }); var presses = 0; var spin = [ "Woahohaohaohaahoahaohaohaohaohaoha. ", "Nononono. aiiiiiiiiiiiiieeeeeeee. ", "Aaaaaaaaaghhhhh. woahwoahwoahwoahwoah. ", "You're eeeeeeeeviiiiiiilllllllll. ", "Eee. eee. eee. eee. eee. ", "Woowoowoowoowoowoowoowoowoo. " ]; var stop = [ "Please. never again.", "I'm so dizzy.", "That's just. cruel.", "Don't you have better things to do?", "I can't feel my toes. oh wait, I don't have any toes!", "This isn't fun anymore.", ". ", "I'm going to be sick.", "Uh-oh, I think I just dropped some tables. ", "Yep, I think I'm about to SQL-project everywhere. ", "SELECT * FROM `stomach`. ", "var_dump($result). ", "+_+" ]; $('#dave').mousedown(function () { $('#message').fadeOut(function () { $(this).text(spin[presses % spin.length]); presses = presses + 1; }).fadeIn(); }).mouseup(function () { $('#message').fadeOut(function () { $(this).text(stop[presses % stop.length]); }).fadeIn(); if( presses >= stop.length - 1 ) { $(this).animate({left: '-999px'}, 1000 * 10, function () { $(this).animate({left: '0'}, 1000 * 4); presses = 0; }); } });