Блог

Главная - Вопросы по программированию - Раскрывающийся список CSS с динамическим контентом WordPress

Раскрывающийся список CSS с динамическим контентом WordPress

#html #css

#HTML #css

Вопрос:

Я создал стилизованный раскрывающийся список для своих сообщений в блоге в WordPress, используя CSS. Как я могу сделать так, чтобы раскрывающийся список применялся только к первому абзацу, а не к другим последующим абзацам?

Любая помощь будет с благодарностью принята, заранее благодарю.

 .dropcap p::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
}

.dropcap p:first-of-type::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
} 
 <div class="dropcap">
  <pre></pre>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>This is italic text</em>, <strong>this is bold text</strong>, <em><strong>this is bold italic</strong></em> text. Donec justo massa, imperdiet ac efficitur sit amet, pretium a nunc. Aliquam
    sem nisi, sagittis a lacus ut, pulvinar molestie magna. Nam aliquam tincidunt erat nec pulvinar. Nullam urna nunc, cursus nec pharetra eu, euismod id dolor. Duis imperdiet, ante iaculis suscipit pharetra, mauris neque ultricies lacus, tincidunt posuere
    lectus ipsum ac est. Donec odio nunc, feugiat nec mi eget, faucibus euismod urna. Donec pretium sit amet leo eget auctor. Nulla consequat metus at ullamcorper faucibus. Donec ultricies tristique velit sit amet commodo. Morbi bibendum, nulla ut aliquam
    bibendum, ex lacus lacinia dui, quis sagittis justo neque vel mauris. Phasellus varius dapibus sapien, et euismod turpis. Praesent elit metus, posuere nec ipsum eget, ultricies lobortis massa.</p>

  <p>Quisque ornare libero id nibh imperdiet ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fringilla urna in mauris consequat, eget lobortis elit sodales. Curabitur ipsum ligula, tincidunt eu venenatis
    quis, ullamcorper et nunc. Sed in hendrerit felis, eu fermentum mauris. In varius non urna at ullamcorper. Duis at arcu nibh. Vivamus et elementum purus. Nulla a tellus dapibus, tristique libero ut, porta odio. Nulla luctus aliquet tempus. Pellentesque
    ultrices finibus turpis, non vestibulum metus.</p>

</div>

Изображение

Комментарии:

1. Можете ли вы показать больше отображаемого HTML? Вы дали нам только первый абзац. Кроме того, вам, вероятно, следует удалить <p> эти обертки the_content() . По сути, вы обертываете свои абзацы <p> тегом, и в этом нет необходимости. Вы пробовали first-of-type вместо first-child ?

2. Я удалил внешний <p> и обновил вопрос с помощью вашего обновленного CSS и более визуализированного HTML.

3. Кажется, сейчас работает?

4. Обновил ваш вопрос, чтобы удалить весь ненужный код и теги.

5. Спасибо. К сожалению, я все еще получаю тот же результат, что и в начале каждого абзаца, даже с изменениями @disinfor.

Ответ №1:

Проблема, с которой вы сталкиваетесь, заключается в том, что ваше первое правило также применяется. Удалите это:

 .dropcap p::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
}
 
 .dropcap p:first-of-type::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
} 
 <div class="dropcap">
  <pre></pre>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>This is italic text</em>, <strong>this is bold text</strong>, <em><strong>this is bold italic</strong></em> text. Donec justo massa, imperdiet ac efficitur sit amet, pretium a nunc. Aliquam
    sem nisi, sagittis a lacus ut, pulvinar molestie magna. Nam aliquam tincidunt erat nec pulvinar. Nullam urna nunc, cursus nec pharetra eu, euismod id dolor. Duis imperdiet, ante iaculis suscipit pharetra, mauris neque ultricies lacus, tincidunt posuere
    lectus ipsum ac est. Donec odio nunc, feugiat nec mi eget, faucibus euismod urna. Donec pretium sit amet leo eget auctor. Nulla consequat metus at ullamcorper faucibus. Donec ultricies tristique velit sit amet commodo. Morbi bibendum, nulla ut aliquam
    bibendum, ex lacus lacinia dui, quis sagittis justo neque vel mauris. Phasellus varius dapibus sapien, et euismod turpis. Praesent elit metus, posuere nec ipsum eget, ultricies lobortis massa.</p>

  <p>Quisque ornare libero id nibh imperdiet ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fringilla urna in mauris consequat, eget lobortis elit sodales. Curabitur ipsum ligula, tincidunt eu venenatis
    quis, ullamcorper et nunc. Sed in hendrerit felis, eu fermentum mauris. In varius non urna at ullamcorper. Duis at arcu nibh. Vivamus et elementum purus. Nulla a tellus dapibus, tristique libero ut, porta odio. Nulla luctus aliquet tempus. Pellentesque
    ultrices finibus turpis, non vestibulum metus.</p>

</div>

Комментарии:

1. Вот и все! Спасибо за вашу помощь.

Метки: