Вопрос по css, css-selectors – Может ли селектор CSS ссылаться на другое свойство селектора?

7

Я только что заметил, что Webkit теперь имеет некоторую поддержку относительноЗначения и единицы измерения уровня CSS спекуляция И мне было интересно, если кто-нибудь знает, есть ли способ ссылаться на другое свойство селекторов CSS (или стиль DOM) из селектора CSS?

Я ожидаю что-то вродеэтот чтобы быть ответом здесь. То, что я знаю, наиболее вероятно для современных реализаций браузера; но, пожалуйста, продолжайте читать ...

Например, в случае, когда анимация может изменить размер элемента (NOTE ${.element2.width} это вымышленный синтаксис):

<style type="text/css">
.element1 {
  .width: /*-webkit-,-o-,-moz-*/calc(80% - ${.element2.width});
}
.element2 {
  .width: 100px;
}
.element2:hover {
  width: 200px;
  transition: all 0.4s ease-in-out;
}
</style>

В этом случае я бы ожидал, что ширина .element1 будет переоценена на основе перехода, инициированного событиями наведения на .element2.

Я понимаю, что вышеупомянутая спецификация. является только рабочим черновиком, но, возможно, синтаксисом для ссылки на такое «свойство ссылочного селектора»; определяется в другой спецификации. что мне еще предстоит открыть? Или просто не повод для беспокойства (благодаря игнорируемому обходному решению)?

Заранее спасибо, что нашли время, чтобы прочитать, не говоря уже о том, чтобы ответить на вопрос.

Нет, это не так, как работают селекторы CSS, и вряд ли этоcalc() будет когда-либо поддерживать ссылку на другое свойство в каскаде, не говоря уже о другом свойстве в совершенно другом правиле. BoltClock♦
Нет. Используйте SASS, LESS или Stylus (Google - ваш друг) sg3s

Ваш Ответ

2   ответа
1

Я добавил ответ на вопрос, который вы связали:https://stackoverflow.com/a/11071806/137626

You can use the same declaration block with as many selectors as you want by grouping them (selectors are separated by commas) You can't reuse the same declaration block later with a different CSS selector without rewriting the whole declaration block preceded by this selector or using a preprocessor/macro that'll do that for you. Or add it to the existing declaration block as above

Теперь с вашим примером элемента, изменяемого самим CSS: вы можете использоватьCSS3 Media Queries И его@media правила, содержащие столько блоков объявлений, сколько вы хотите. Эти медиа-запросы будут адаптироваться к ширине области просмотра здесь.
Смешивание расширяющихся элементов с помощью анимации и медиазапросов, которые могут привести к обратному эффекту, очень скоро станет очень сложным (и мне будет интересно, с каким контентом вы играете); если вы хотите сохранить его простым, то JS - это путь. Существуют переменные, циклы, события;), и вы можете запустить анимацию CSS3, добавив или удалив один класс из элемента (или любой другой селектор CSS).
CSS3 не заменит JS (и вы не должны использовать JS для стилизации HTML, поскольку JS не активирован или не существует повсюду, и уже есть хороший запасной вариант с именем CSS).

Спасибо за ваш ответ, это самый информированный. Я думаю, что вы правы в отношении решения этой проблемы с помощью javascript, поскольку она не вызывает вышеупомянутых осложнений. Benjamin Conlan
1

Кроме использования прекомпилятора, такого какдерзость / СКС или жеМеньшеЯ верю, что все, что вы можете сделать, это подождать или жестко закодировать.

Я надеялся, что это не был ответ, но, судя по всему, вы абсолютно правы, подделайте это с "осознанным". статические переменные перед вычислением через less / sass или другие синтаксические абстракции CSS. Или, как вы так элегантно выразились. Подожди;) Benjamin Conlan

Похожие вопросы