Вопрос:
Хорошо, я работаю с html/css уже почти десять лет, и для жизни я просто не могу понять, почему это не сработает.
Изначально у меня возникли проблемы с получением двух отдельных div, чтобы иметь display: none вместе с другими свойствами, при загрузке страницы. После устранения неполадок я пришел к выводу, что это было что-то не так в файлах начальной загрузки, поэтому после более чем часа сокращения я упростил его до следующего, чтобы удалить все возможные источники ошибок:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> #first { display: none; } #second { display: none; } </style> </head> <body> <div id=»first» >abc</div> <div id=»second»>123</div> </body> </html>
Я сохранил это как test.html и открыл его через firefox, чтобы увидеть:
123
Я проверяю флажок “Inspect element”, и, конечно, #first имеет свойство “display: none”, но # secondec не делает.
Я продолжал проверять это с помощью хрома и края и получил те же результаты.
Я обнаружил, что используя
#first, #second { display: none; }
работает как ожидалось. Тем не менее, мне все равно нужно добавить другие свойства к # секунде, таким образом, думая, что я умный:
#first, #second { display: none; <!—Awesome!—> } #second { height: 100px; <!—nope—> width: 100px; <!—nope—> }
После многократного повторения в попытке получить какой-либо другой результат, я закончил тем, что не имел абсолютно никаких оснований для того, чтобы работать так или иначе, но на данный момент я перестал заботиться.
Я приступил к открытию нового документа, напечатав весь оригинальный <style>…</style> (начиная с первого блока кода выше) и скопировав его из несохраненного документа и вставив его поверх неисправного.
Обновилась страница, ничего не увидела. Checked Inspect Element, конечно, все было там, только с “display: none”
Итак, мой вопрос после почти трех часов устранения неполадок:
- Что случилось?
- Почему это произошло?
Дополнительная информация:
Windows 10 Home 64-bit
Применение:
Код Visual Studio
Лучший ответ:
В CSS есть странный символ, который можно увидеть при вставке кода в jsfiddle:
Удалите это или вставьте CSS ниже:
#first { display: none; } #second { display: none; }<div id=»first»>abc</div> <div id=»second»>123</div>Ответ №1
Я заметил, что в вашем <style> появляются странные символы, отображаемые в редакторе стиля Firefox сразу после закрытия } из #first {. Я предполагаю, что это путало браузеры, чтобы не обрабатывать #second вообще.
Странно, хотя эти символы (показанные как ​ в Firefox) не отображаются в моем текстовом редакторе…
… заменяя строку на } на вновь напечатанную, она решила проблему.
Ответ №2
Был там!
Я попробовал ваши примеры, скопировав/вставив JSFiddle, и на самом деле у вас есть посторонние символы после # первой скобки закрытия.
Просто избавься от этого char, и все готово. Может быть хорошей идеей проверить ваш текстовый редактор. Я всегда включаю невидимые символы во время кодирования, чтобы предотвратить подобные проблемы.
Что на самом деле происходит, так это то, что процессор CSS браузера умирает после # первой скобки закрытия и ничего после этого не обрабатывается. Вот почему # секунда, похоже, не работает.
https://jsfiddle.net/sbnyg2ev/
#first { display: none; } <— just delete that char, is not a space. #second { display: none; }
