Перейти к содержимому



Проблема с селекторами.

#1 denis

denis
  • Заблокированные
  • 173 сообщений
  • Репутация: -13
0

Отправлено 28 Июнь 2012 - 14:57

У меня текст не изменяется, после изменения в css-коде. Я так думаю, что я не правильно прописываю селектор. Помогите, пожалуйста.
Вот CSS-код:
.vidget p h4{
font: Arial, Helvetica, sans-serif; margin:0 20px 0 0; color:#000;
}
.vidget p h4 a{
color:#000; text-decoration:underline;
}
.vidget p h4 a:hover{
color:#0097bd; text-decoration:none;
}
Вот кусок HTML-кода:
<div class="sidebar">
			  <div class="vidget">
				 <h3>Вход в аккаунт</h3>
				
			   
				
				
				 <form class="loginform-main" action="" method="">
<input class="email-txt" type="text" name="email" value=" Email" onblur="if(this.value.length == 0) this.value = ' Email'" onfocus="if(this.value == ' Email') this.value = '' "/>

<input class="pass-txt" type="text" name="pass" value=" Пароль" onblur="if(this.value.length == 0) this.value = ' Пароль'" onfocus="if(this.value == ' Пароль') this.value = '' "/>

<input class="login-btn" type="image" src="images/bg-login.jpg" />
</form>
		
		 <p><h4>Забыли пароль?</h4S></p>	 
				
			  </div>
		  </div>
Заранее благодарю за помощь!

 

 

  • 0

#2 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 28 Июнь 2012 - 15:22

а что тут у тебя должно меняться, если у тебя тут форма?

а селекторы действительно не правильно прописал, нарушил синтаксис

и еще опечатка:
<h4>Забыли пароль?</h4S>

мне кажется S тут лишняя


а вообще попробуй

.vidget{
font: Arial, Helvetica, sans-serif; margin:0 20px 0 0; color:#000;
}
.vidget a{
color:#000; text-decoration:underline;
}
.vidget a:hover{
color:#0097bd; text-decoration:none;

при условии, что у тебя будет нормальная ссылка
<p><h4>Забыли пароль?</h4></p>
<p><a href="reset.php">восстановить</a></p>

  • 0

#3 denis

denis
    Topic Starter
  • Заблокированные
  • 173 сообщений
  • Репутация: -13

Отправлено 28 Июнь 2012 - 16:20

У меня весь блок принимает тогда эти условия. Не помогло.

Форма та выше, или я чего то не знаю!? Опчетку исправил.


  • 0

#4 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 28 Июнь 2012 - 16:41

denis, судя по твоему HTML, не говорю об ошибке ТЭГА - у тебя некчему применять твои правила! Т.к. либо я ослеп, либо я невижу в H4 ссылки, к которой ты применяешь стили.
  • 0

#5 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 28 Июнь 2012 - 17:13

Во вторых маленькое замечание-разяснение.

В твоем примере идет такой селектор:
.vidget p h4 a:hover

Как это будет работать: ищим все a с псевдоклассом hover "вложенные" h4 во вложенных p, которые в свою очередь вложены в .vidget
Теперь давай подумаем? А будет ли в твоем примере разница между
.vidget p h4 a:hover и .vidget h4 a:hover?

Небудет, т.к. он всеравно найдет в итоге одни и те же h4 и соответственно a тоже...

Разница между "h4 a" и "h4>a"?
"h4 a" - будут искать все А, которые будут находиться даже во вложенных DOM елементах, которые расположены внутри тэга H4 тоесть если у тебя будет в h4 (допустим) еще та же таблица, а где то там в какой-то ячейке находится наш зловредный тэг а - он будет найден.

"h4>a" - будут выбраны только те а , которые находятся непосредственно внутри h4, для которых этот h4 является родителем (верхний вариант не сработает)

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

В CSS есть понятие наследование и приоритетность...
Приоритетность по убыванию:
html>element - когда описан стиль в самом тэге.
css>teg
css>id
css>class

так же к каждому css>* описаному СВОЙСТВ можно дописывать !important; тогда, значемость данного свойства повышается до максимума, но опять же, играет вариант к какому селектору было прописано (если important стоит и в #id и в .class - важней будет #id)

Так же! Играет роль частенько где именно в css файле был описано свойство.

Если у тебя идет таким образом

.test {color:#fff}
.test {color:#000}

Будет у тебя в итоге черный цвет, т.к. последняя строка перекроет придыдущую...
Так .. что б еще...?

А вот чот... есть понятие наследование... какие-то елементы наследуют стили у своих родителей.. и есть встроенные (в каждом браузере по разному могут быть) свойства "стилей" елементов... к примеру тот же самый h1-6, li, ol, а и т.д. и очень часто это подводный камень для начинающих верстальщиков.. т.к. в одном браузере будет один паддинг - дивы будут влазить в отведенную ширину.. а в другом браузере будет другой паддинг.. и может уже не влезть и все поплыть, поэтому опытные люди - сразу пишут css-reset в начале "глобального" css файлика.. что б потом небыло геморою.

и на последок.. пользуйся хромом (просмотр кода элемента) или же фаербагом - в обоих случаях можно просмотреть все, что косается выбранного тобой елемента на странице.. какие свойства, какие css, откуда они взяты, что унаследовано и от кого... и т.д. - я уже не говорю о замечательном объекте "console" который помогает в дебаге как... даже слов немогу подобрать КАК он помогает.
  • 0

#6 denis

denis
    Topic Starter
  • Заблокированные
  • 173 сообщений
  • Репутация: -13

Отправлено 28 Июнь 2012 - 18:22

Как выровнять картинку и надпись по одной горизонтальной линии?
  • 0

#7 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 28 Июнь 2012 - 19:01

У меня текст не изменяется, после изменения в css-коде. Я так думаю, что я не правильно прописываю селектор. Помогите, пожалуйста.

denis, у вас несколько ошибок:
1. Нельзя вкладывать тег h4 в тег p. Т.е. вот такая конструкция недопустима (браузер ее не поймет и будет хз как интерпретировать):
<p><h4>Забыли пароль?</h4></p>
правильно так:
<h4>Забыли пароль?</h4>
2. Чтобы указать имя шрифта в стилях следует писать не так:

font: Arial, Helvetica, sans-serif;
а так
font-family: Arial, Helvetica, sans-serif;
т.е. с учетом исправления первой ошибки правильно в стилях должно быть так:
.vidget h4{
font-family: Arial, Helvetica, sans-serif; margin:0 20px 0 0; color:#000;
}
.vidget h4 a{
color:#000; text-decoration:underline;
}
.vidget h4 a:hover{
color:#0097bd; text-decoration:none;
}

Как выровнять картинку и надпись по одной горизонтальной линии?

Смотря что вы подразумеваете под словами "выровнять по одной горизонтальной линии" и еще процедура выравнивания зависит от размеров картинки и надписи.
Короче, картинку и надпись в студию, + подробное описание или лучше скриншот нужного вам результата.
  • 1

#8 denis

denis
    Topic Starter
  • Заблокированные
  • 173 сообщений
  • Репутация: -13

Отправлено 28 Июнь 2012 - 19:28

Да уже все, я разобрался во всем. Спасибо, кто помогал.
  • 0

#9 WebMaster

WebMaster
  • Пользователь
  • 97 сообщений
  • Репутация: 3

Отправлено 17 Июль 2012 - 13:09

А разве элемент "р" может содержать блочные элементы? Я что то подзабыл... вот читаю и вижу что тут ошибка .vidget p h4
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru