Приоритет псевдоэлемента

@Aqua77 · Регистрация: 13.07.2015

Author24 — интернет-сервис помощи студентам

Псевдоэлемент first-line красит первую строку абзаца в синий, но я создал индивидуальный класс абзаца biline и присвоил ему черный цвет. Как сделать чтобы этот класс игнорировал first-line и оставался чёрным? Спасибо.

CSS

p::first-line {
font-weight: bold;
color: blue;
}
.main p.biline{
    font-size: 1.6em;
    margin: 5px 0 25px 50px;
    color: black;
}

HTML5

<body>
<div class="main">
    <h1>tatata <strong>CSS</strong></h1>
    <h2>Обзор возможностей типографики</h2>
    <p class="biline">31 октября <strong>Роман Дибров</strong></p>
</div>
</body>

Добавлено через 4 минуты
Даже если класс идентификатором заменить всё ровно не выходит

@deller · 14.08.2016, 21:28

CSS

1	color: black !important;

@Aqua77 · 14.08.2016, 21:43 **[ТС]**

Получается псевдоэлемент ::first-line имеет приоритет больше чем индификатор?

@deller · 14.08.2016, 22:00

Сообщение от Aqua77

Получается псевдоэлемент ::first-line имеет приоритет больше чем индификатор?

Хм... получается что так

Добавлено через 58 секунд
А хотя все правильно, псевдоэлемент находится внутри <p> и он в приоритете

@mrtoxas · 14.08.2016, 22:03

CSS

p:not(.biline):first-line {
  font-weight: bold;
  color: blue;
}

@Aqua77 · 14.08.2016, 22:15 **[ТС]**

Сообщение от deller

<p> и он в приоритете

HTML5

Я  заменил класс идентификатором и всё ровно псевдоэлемент приоритетнее
<body>
<div id="main">
    <h1>tatata <strong>CSS</strong></h1>
    <h2>Обзор возможностей типографики</h2>
    <p class="biline">31 октября <strong>Роман Дибров</strong></p>
</div>
</body>

CSS

p::first-line {
font-weight: bold;
color: blue;
}
.main p#biline{
    font-size: 1.6em;
    margin: 5px 0 25px 50px;
    color: black;
}

Добавлено через 20 секунд

Добавлено через 33 секунды

Сообщение от mrtoxas

p:not(.biline)

Идеально

Добавлено через 4 минуты

Сообщение от deller

А хотя все правильно, псевдоэлемент находится внутри <p> и он в приоритете

Если так, то и p.biline тоже в элементе <p>

@monochromer · 14.08.2016, 22:32

CSS

1
2
3

.main p.biline::first-line {
  color: inherit;
}

@Aqua77 · 14.08.2016, 22:35 **[ТС]**

Сообщение от monochromer

1
2
3
.main p.biline::first-line {
* color: inherit;
}

Можете помочь разобраться :first-line имеет приоритет больше чем индификатор?

@monochromer · 14.08.2016, 22:50

Сообщение от Aqua77

Можете помочь разобраться :first-line имеет приоритет больше чем индификатор?

Покажите мне селекторы, которые вы сравниваете.

@Aqua77 · 14.08.2016, 22:54 **[ТС]**

Сообщение от monochromer

Покажите мне селекторы, которые вы сравниваете

p::first-line
p#biline

CSS

.main p::first-line {
font-weight: bold;
color: rgb(153,153,153);
}
.main p#biline{
    font-size: 1.6em;
    margin: 5px 0 25px 50px;
    font-weight: bold;
    color: black;
}

Хтмл если важно

HTML5

<div class="main">
    <h1>Большая книга <strong>CSS</strong></h1>
    <h2>Обзор возможностей типографики</h2>
    <p id="biline">31 октября <strong>Роман Дибров</strong></p></div>

@monochromer · 14.08.2016, 22:59

Сообщение от Aqua77

p::first-line
p#biline

Тут дело не в приоритете. Селекторы обращаются к разным элементам:
p#biline - к параграфу
p::first-line - к вложенному в параграф элементу (псевдоэлементу)

Поэтому я выше написал, что стили нужно наследовать.

@Aqua77 · 14.08.2016, 23:05 **[ТС]**

Спасибо, теперь спокойно засну

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	14.08.2016, 22:59	11
	Сообщение было отмечено Fedor92 как решение Решение Сообщение от Aqua77 p::first-line p#biline Тут дело не в приоритете. Селекторы обращаются к разным элементам: p#biline - к параграфу p::first-line - к вложенному в параграф элементу (псевдоэлементу) Поэтому я выше написал, что стили нужно наследовать. 1

@Aqua77 25 / 25 / 19 Регистрация: 13.07.2015 Сообщений: 433
	14.08.2016, 23:05 [ТС]	12
	Спасибо, теперь спокойно засну 0

Блоги программистов
Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .	Полезные поделки на Arduino, которые можно сделать самому raxper 06.01.2025 Arduino как платформа для творчества Arduino представляет собой удивительную платформу для технического творчества, которая открывает безграничные возможности для создания уникальных проектов. Эта. . .	Подборка решений задач на Python IT_Exp 06.01.2025 Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .	С чего начать программировать микроконтроллеры raxper 06.01.2025 Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .
Из чего собрать игровой компьютер inter-admin 06.01.2025 Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .	Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного сумматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом задержки). Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .	Руководство по созданию бота для Телеграм на Python IT_Exp 04.01.2025 Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .

@Aqua77 25 / 25 / 19 Регистрация: 13.07.2015 Сообщений: 433
	14.08.2016, 21:43 [ТС]	3
	Получается псевдоэлемент ::first-line имеет приоритет больше чем индификатор? 0

@deller 20 / 25 / 12 Регистрация: 26.06.2013 Сообщений: 111
	14.08.2016, 22:00	4
	Сообщение от Aqua77 Получается псевдоэлемент ::first-line имеет приоритет больше чем индификатор? Хм... получается что так Добавлено через 58 секунд А хотя все правильно, псевдоэлемент находится внутри <p> и он в приоритете 0

@Aqua77 25 / 25 / 19 Регистрация: 13.07.2015 Сообщений: 433
	14.08.2016, 22:35 [ТС]	8
	Сообщение от monochromer 1 2 3 .main p.biline::first-line { * color: inherit; } Можете помочь разобраться :first-line имеет приоритет больше чем индификатор? 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	14.08.2016, 22:50	9
	Сообщение от Aqua77 Можете помочь разобраться :first-line имеет приоритет больше чем индификатор? Покажите мне селекторы, которые вы сравниваете. 0

Приоритет псевдоэлемента

Решение