Nano Hash - криптовалюты, майнинг, программирование

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

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

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">? Без использования :not?

Кроме того, как мне написать код CSS, чтобы изменить размер шрифта статьи на размер шрифта 14 пикселей и высоту строки 22 пикселя? Не затрагивая все остальное выше (не в разделе статьи)?

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

html css css-selectors internet-explorer-8
18.04.2014

  • Вы против использования javascript для заполнения поддержки? Если нет... Тогда ваше решение - selectivizr.js - selectivizr.com 18.04.2014
  • Здесь нет джаваскрипта. Из-за определенных ограничений кода, к которому я могу получить доступ, я могу использовать только CSS. 18.04.2014
  • Помимо того, что мы придаем этим определенным абзацам класс и повышаем специфичность, нет другого динамического решения без использования :not. Так что либо не поддерживает IE, либо вставляет туда библиотеку javascript... 18.04.2014
  • Ваш HTML кажется довольно уродливым. Некоторые значения ваших атрибутов имеют несоответствующие кавычки, и p не может содержать h1. Некоторые из этих ошибок могут на самом деле мешать вашим селекторам, поэтому вам нужно в первую очередь убедиться, что ваш HTML действителен. 18.04.2014
  • ewww... встроенные стили... вы можете стилизовать теги p по своему усмотрению, а затем использовать !important на .category_row, чтобы убедиться, что эти стили отображаются так, как вы хотите. 18.04.2014
  • @BoltClock иногда так пишется статья, поэтому мне приходится обходить ошибки. Мне повезло. Приведенный выше код представляет собой образец HTML статьи. 18.04.2014

Ответы:


1

Вам нужно будет быть более подробным, если вы хотите поддерживать старые браузеры. Радость новых синтаксисов заключается в том, что мы можем быть более содержательными, но если у вас есть 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/

18.04.2014
  • Или он может решить не использовать какие-либо новые семантические элементы, а не заточку, и просто придерживаться того, что IE8 уже разумно поддерживает. 18.04.2014
  • Вероятно, к лучшему, поскольку теперь я вижу, что он говорит, что вообще не умеет возиться с Javascript :) 18.04.2014
  • @ChrisHardie Спасибо, Крис. Я не думал об этом таким образом, закодируйте, но затем нацельтесь на все, что указано в селекторе :not, чтобы вернуться к нормальному состоянию. Похоже, это то, как я должен это сделать! 18.04.2014
  • @ user3097331 Так будет, пока IE 10 не станет стандартным. Не стесняйтесь отмечать как ответ, если это вообще помогло :) 18.04.2014

    • 2

    Почему бы вам не обернуть фактический контент в его собственный 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, как сказал Крис в своем ответе.

    18.04.2014
  • У меня нет доступа к шаблонам, и есть тысячи статей на нескольких порталах, которые мне пришлось бы изменить. Но спасибо. 18.04.2014
  • Если вы измените шаблоны, они тоже будут изменены (если только у вас нет действительно странного решения для кэширования). Без изменения HTML-разметки невозможно выбрать только теги p, если вы не используете какой-то более сложный селектор CSS, например :not. 18.04.2014
  • Поскольку я всего лишь стажер, у меня не будет доступа к этим шаблонам, даже если это сэкономит мне много времени. Мне нравится селектор :not, но мы по-прежнему поддерживаем IE 8. Бу-у-у. 18.04.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..