Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.07.2015, 19:02
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Задачка на смекалку:
Есть тег p такого вида
<p>
<br/>
Тут текст <br/>
Ещё текст ...
</p>

и такого:
<p>
Тут текст <br/>
Ещё текст ...
</p>


Задача - по возможности убить c помощью css тег <br/> (oтступ) в начале первой строки визуально; (не убивая <br/>, которые могут быть далее по тексту) Теги <p> как первого так и второго типа на странице расположены произвольно (как кол-во так и последовательность)

Последний раз редактировалось Deff, 07.07.2015 в 02:00.
Ответить с цитированием
  #2 (permalink)  
Старый 06.07.2015, 19:11
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

p:first-line{
  line-height:0;
}
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2015, 19:24
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

а можно проще:
p br:first-child {
    display: none;
}
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2015, 19:28
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

EmperioAf,
1. Есть и теги <p> без <br> в первой строке
2. В псевдо элементе :first-line допустимы только изменения правил для правил font и line-height

Проверка:
<!DOCTYPE html>
  <html>
   <head>
<style>
body{
 margin:0;
 padding:0;
}
p {
  border:blue solid 1px;
}
p:first-line{
  line-height:0;
}
</style>
    </head>
<body>
<!-- Вариант-1 тега <p> -->
<p>
    <br/>
Тут текст - 1 <br>
Еще текст
</p>

<!-- Вариант-2 тега <p> -->
<p>
Тут текст - 2 <br>
Еще текст
</p>


</body>
  </html>

Последний раз редактировалось Deff, 06.07.2015 в 20:00.
Ответить с цитированием
  #5 (permalink)  
Старый 06.07.2015, 19:36
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

не понял, почему нельзя написать так:
p *:first-child {
  display: none;
}

?
Ответить с цитированием
  #6 (permalink)  
Старый 06.07.2015, 19:37
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

EmperioAf,
Для второго тега <p> - убъётся перевод строки
Ответить с цитированием
  #7 (permalink)  
Старый 06.07.2015, 19:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Deff,

<!DOCTYPE html>
  <html>
   <head><meta charset="utf-8">
<style>
body{
 margin:0;
 padding:0;
}
p {
  border:blue solid 1px;
}
p > br{
   display: none;
}
</style>
    </head>
<body>

<p>
    <br/>
Тут текст - 1
</p>


<p>
Тут текст - 2 <br>
Еще текст
</p>
</body>
  </html>
Ответить с цитированием
  #8 (permalink)  
Старый 06.07.2015, 19:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Deff,
или надо так?
<!DOCTYPE html>
  <html>
   <head><meta charset="utf-8">
<style>
body{
 margin:0;
 padding:0;
}
p {
  border:blue solid 1px;
}
p:first-of-type > br{
   display: none;
}
</style>
    </head>
<body>

<p>
    <br/>
Тут текст - 1
</p>


<p>
Тут текст - 2 <br>
Еще текст
</p>
</body>
  </html>
Ответить с цитированием
  #9 (permalink)  
Старый 06.07.2015, 19:44
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

рони, поставил бы + (2-й твой) Если б мог
Но теги <p> (как Вариантов 1, так и 2) рандомно разбросаны по странице, хитрость не проходит

Последний раз редактировалось Deff, 06.07.2015 в 19:49.
Ответить с цитированием
  #10 (permalink)  
Старый 06.07.2015, 19:53
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Сообщение от Deff
Но теги <p> (как Вариантов 1, так и 2) рандомно разбросаны по странице, хитрость не проходит
почему нельзя тегам <p> задать класс ?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Задачка на смекалку subzey Общие вопросы Javascript 52 16.08.2013 21:39
Задачка: Хром / Мозилла? eirnvn Opera, Safari и др. 0 09.07.2013 13:18
задачка по геометрии js lammeR Общие вопросы Javascript 16 02.02.2011 16:01
Нестандартная задачка lsync Общие вопросы Javascript 6 04.09.2010 19:34
Небольшая задачка Maksim jQuery 4 30.09.2009 19:43