Как написать код CSS без использования: не селектор?

0

У меня есть страница статьи, в которой я делаю небольшие изменения CSS, такие как маржа и размер шрифта. Мой код должен поддерживаться Internet Explorer 8 и выше. Проблема в том, что я использую некоторые селектора CSS, которые IE8 не поддерживает. Как написать код CSS без использования: not selector?

HTML для примера страницы статьи

<div class="entry">
  <h3 class="social-title>Share This Article </h3> 
  <div class="social-content>
    <table>
      <td><a href="twitter.com"><img class="" src="twitter.png"><span class="">Twitter</span></a></td>
      <td><a href="facebook.com"><img class="" src="facebook.png"><span class="">Twitter</span></a></td>
    </table>
  </div>

<!-- The article would start here -->
  <p class="category_row"><h1 class="category-title>Lifestyle</h1></p>
  <p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;"><a href="example.com/article.html"><img alt="" style="float: left;" src="example.jpg"></a>Article goes starts here...</p>
  <p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;">Second paragraph</p>
  Third paragraph
</div>

CSS Я использую

.entry p:not(.category_row) {
font-size: 14px;
line-height:22px;
}

img (margin: 10px)

Пока что, если бы я хотел добавить маркер к изображению, который находится в разделе статьи, как бы я написал код CSS, чтобы он влиял только на изображение в разделе статьи, а не на изображения в <div class="social-content">? Без использования: нет?

Также как мне написать код CSS, чтобы изменить размер шрифта статьи на размер шрифта 14px и высоту строки 22px? Без влияния на все остальное (не в разделе статьи)?

Извините, если это сбивает с толку, но я уточню, если потребуется!

  • 0
    Вы против использования javascript для поддержки? Если нет ... Тогда ваше решение - selectivizr.js - selectivizr.com
  • 0
    Нет JavaScript здесь. Из-за определенных ограничений в коде, к которому я могу получить доступ, я могу использовать только CSS.
Показать ещё 4 комментария
Теги:
css-selectors
internet-explorer-8

2 ответа

0
Лучший ответ

Вам нужно быть более подробным, если вы хотите поддерживать старые браузеры. Радость новых синтаксисов заключается в том, что мы можем быть более содержательными, но если у вас есть IE 8 в вашем поддерживаемом списке браузеров, вам нужно начать с создания более общих селекторов, а затем переопределить эти стили в более точных селекторах.

.entry p {
   font-size: 14px;
   line-height:22px;
}

.entry p.category_row {
  font-size: XXpx;
  line-height:XXpx;
}

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

<article>
  <img ... />
</article>

И изображения статей будут оформлены с помощью этого простого селектора: article img {... }

Если вы хотите использовать article с IE 8, обязательно включите это: https://code.google.com/p/html5shiv/

Поделиться
  • 0
    Или он может отказаться от использования каких-либо новых семантических элементов, а не от Shiv, и просто придерживаться того, что IE8 уже разумно поддерживает.
  • 0
    Наверное, к лучшему, как я вижу сейчас, когда он говорит, что вообще не может возиться с Javascript :)
Показать ещё 2 комментария
0

Почему бы вам не обернуть фактический контент в его собственный div?

<p class="category-row">....</p>
<div class="post-content"><!--- maybe use article tag here -->
   <p>First paragraph....</p>
   <p>Second Paragraph</p>
</div>

Тогда вы можете просто ссылаться на p как

.entry .post-content p {
     ....
}

Кроме того, "строка категории" не похожа на абзац? Если это "строка", то более подходящим будет div или span. Если он содержит ничего, кроме h1, вы можете также отказаться от него и оставить h1 без оболочки.

Если вы используете тег статьи (или любой другой новый семантический тег html5), включите html5shiv, как сказал Крис в своем ответе.

Поделиться
  • 0
    У меня нет доступа к шаблонам, и я хочу изменить тысячи статей на нескольких порталах. Но спасибо.
  • 0
    Если вы измените шаблоны, они тоже будут изменены (если только у вас не будет действительно странного решения для кэширования). Без изменения HTML-разметки невозможно выбрать только теги p, если вы не используете какой-то более сложный CSS-селектор, такой как: not.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню