taliban
@taliban
php программист

Баг или фича в цсс?

Добрый день, люди, наткрулся только что на одну интересную особенность, и, так как сам не лучший верстальщик, хочу спросить почему так просиходит?
<html>
	<head>
		<style type="text/css">
			form input[type=text]{
				width:100px;
			}
			.test input{
				width:200px;
			}
		</style>
	</head>
	<body>
		<form>
			<input type="text" />
			<div class="test"><input type="text" /></div>
		</form>
	</body>
</html>


Почему оба поля одинаковой ширины? Почему второе правило не срабатывает? Оно ведь должно перекрывать правило на втором инпуте.


И даже если класс переместить на поле, то всеравно оно не будет восприниматься.

UPD: Я не ищу решения проблемы, я хочу узнать почему так происходит!

Такой код тоже работает неожиданно (для меня)
<html>
	<head>
		<style type="text/css">
			form input[type=text]{
				width:100px;
			}
			.test{
				width:200px;
			}
		</style>
	</head>
	<body>
		<form>
			<input type="text" />
			<div><input type="text"  class="test" /></div>
		</form>
	</body>
</html>
  • Вопрос задан
  • 2730 просмотров
Решения вопроса 1
@avrelian
Играет самый специфичный селектор.
Попробуйте так
form .test input{
width:200px;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@avrelian
!important — это как последняя пуля. Надо беречь для себя…
Ответ написан
Комментировать
taliban
@taliban Автор вопроса
php программист
Такой код тоже работает неожиданно (для меня)

<html>
	<head>
		<style type="text/css">
			form input[type=text]{
				width:100px;
			}
			.test{
				width:200px;
			}
		</style>
	</head>
	<body>
		<form>
			<input type="text" />
			<div><input type="text"  class="test" /></div>
		</form>
	</body>
</html>

Ответ написан
@tick
хотите еще больше магии?
<html>
    <head>
        <style type="text/css">
            input[type=text]{
                width:100px;
            }
            .test input{
                 width:200px;
             }
         </style>
    </head>
    <body>
        <form>
            <input type="text" />
            <div class="test"><input type="text" /></div>
        </form>
    </body>
</html>


длина будет разной

а поменяйте порядок стилей — длина будет одинакова.
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Приоритеты селекторов разные. Вот и не перекрываются. Это даже не фича, а одна из ключевых особенностей.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы