Czy selektor CSS może odwoływać się do innej właściwości selektora?

Question

Właśnie zauważyłem, że Webkit ma teraz pewne wsparcie dotyczące specyfikacji CSS Values and Units Module Level. I zastanawiałem się, czy ktoś wie, czy istnieje sposób na odwołanie się do innej selektory CSS (lub stylu DOM) z selektora CSS?

Spodziewam się, że odpowiedź brzmi: coś takiego jak this. Co wiem, najprawdopodobniej ma to miejsce w przypadku obecnych wersji przeglądarki; ale proszę czytać dalej ...

Na przykład, w przypadku, gdy animacja może zmienić rozmiar elementu (UWAGA${.element2.width} składni jest fikcyjne):

<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> 

W tym przypadku byłoby spodziewam. szerokość elementu1, która ma być ponownie obliczana na podstawie przejścia wywołanego przez zdarzenia najechania na .element2.

Zdaję sobie sprawę, że wspomniana specyfikacja. jest tylko roboczym szkicem, ale być może składnia odnosząca się do takiej "referencyjnej właściwości selektora" jest zdefiniowana w innej specyfikacji. którego jeszcze nie odkryłem? A może po prostu nie ma powodu do niepokoju (dzięki przeoczonej pracy)?

Z góry dziękuję za poświęcenie czasu na przeczytanie, nie mówiąc już o odpowiedzi na pytanie.

Answer 1

dodałem odpowiedź na pytania, które powiązać https://stackoverflow.com/a/11071806/137626

• można użyć tego samego bloku deklaracji z tyloma selektorów, jak chcesz, grupując je (selektory są oddzielone przecinkami)
• Można Ponownie użyj tego samego bloku deklaracji później z innym selektorem CSS bez przepisywania całego bloku deklaracji poprzedzonego przez ten selektor lub używając preprocesora/makra, który zrobi to za ciebie. Lub dodać go do istniejącego bloku deklaracji jak wyżej

teraz z Twojego przykład elementu przeskalowane przez samego CSS: można użyć CSS3 Media Queries i jego @media zasad zawierających wiele bloków deklaracji, jak chcesz. Te zapytania o media dostosują się tutaj do szerokości rzutni.
Mieszanie rozwijających się elementów za pomocą animacji i zapytań o media, które miałyby odwrotny skutek, będzie bardzo szybko bardzo skomplikowane (i będę się zastanawiał, z jaką treścią grasz); jeśli chcesz zachować prostotę, to JS jest drogą do zrobienia. Istnieją zmienne, pętle, zdarzenia;) i możesz uruchomić animację CSS3, dodając lub usuwając pojedynczą klasę z elementu (lub dowolnego selektora CSS).
CSS3 nie zastąpi JS (i nie powinieneś używać JS do stylu HTML, ponieważ JS nie jest aktywowany lub istnieje wszędzie i jest już niezły fallback nazwany CSS).

Answer 2

Inne niż używanie prekompilatora, takiego jak sass/scss lub less, uważam, że wszystko, co możesz zrobić, to czekać lub zakodować je w sposób sztywny.