Как сделать стили CSS зависимыми от его родительского элемента

Мне было интересно, можно ли определить стили элемента в зависимости от значения идентификатора тела.Как сделать стили CSS зависимыми от его родительского элемента

Это трудно объяснить, но что-то, как это было бы идеально:

HTML:

<body id="home">

CSS:

body#home { 
    a { /* code here */ } 
    p { /* code here */ } 
} 

body#profile { 
    a { /* different code here */ } 
    p { /* different code here */ } 
}

Я знаю, что могу это сделать:

body#home a { /* code here */ }

, но это b очень многократно повторяется.

Я буду с нетерпением жду ваших ответов,

Peter

идентификаторы

источник

2013-12-04 Peter Stuart

Если вы заинтересованы в использовании CSS препроцессора, вам может сделать это с Sass. http://sass-lang.com/ – brouxhaha

Возможно, вы смотрите на это: body # home a {/ * code * /} body # home p {/ * code * /} body # profile a {/ * code * /} body # profile p {/ * code * /} – Kiyarash

Обычно полезно прочитать весь вопрос – brouxhaha

Имейте в виду, что в то время как гнездовые стили, как это может поддерживаться с использованием фреймворков CSS, он должен быть продуманным для поддержания модульности и чистого наследования в вашем CSS. Вы можете обрести больше вреда, чем пользы. В частности, следить за чем-то знают, как правило вводного, описанное здесь:

http://thesassway.com/beginner/the-inception-rule

Начального Правило: не идет более четырех уровней глубоко.

Любые изменения, вносимые в разметке должны быть отражены в вашем Sass и наоборот. Это также означает, что стили ограничены для жизни для этих элементов и что структура HTML, которая полностью побеждает цель части «Каскад» в «Каскадных таблицах стилей»."

Если вы будете следовать этому пути, вы могли бы также вернуться к написанию CSS встроенный в ваш HTML (пожалуйста, не).

источник

2013-12-04 18:18:07

Основываясь на вашем ответе, я решил не следовать этому маршруту, и просто ре -структурируйте файлы стилей. Спасибо за вашу помощь :) –

Да, похоже, некоторые случаи, когда стили вложения могут помочь повысить эффективность и удобство в обслуживании ... это может быть червь, если он не был тщательно продумано. Отличный вопрос. –

должны быть уникальными, так #home { ... } является приемлемым.

Тогда и дочерние элементы будут:

#home .myClass { ... }

Этот метод часто используется при повторной кожи страницы быть просто изменив идентификатор или класс на теле.

источник

2013-12-04 18:11:39

Вы можете это сделать, если вы используете рамки CSS, как SASS или LESS

Вот documentation о том, как сделать это с меньшими затратами. Надеюсь это поможет.

источник

2013-12-04 18:11:52 brian

Лучший способ сделать то, о чем вы говорите, - создать базовую таблицу стилей.

Они либо:

<style> элемент в заголовке отвергая все, что вы выбираете

или

Есть различные таблицы стилей для каждой страницы

источник

2013-12-04 18:13:44

Как сделать стили CSS зависимыми от его родительского элемента

ответ

Смежные вопросы