Как наследуется стиль
Как сделать так, чтобы стиль имел все свойства стиля, определенные в .a .b .c, за исключением background-color (или какого-либо другого свойства)? Кажется, это не работает.
.a .b .c
{
background-color: #0000FF;
color: #ffffff;
border: 1px solid #c0c0c0;
margin-top: 4px;
padding: 3px;
text-align: center;
font-weight: bold;
}
.a .b .c .d
{
background-color: green;
}
Ответы 5
.a, .b, .c {color: #ffffff; border: 1px solid #c0c0c0; margin-top: 4px; padding: 3px; text-align: center; font-weight: bold; }
.a {background-color: red;}
.b {background-color: blue;}
.c {background-color: green;}
Вы должны добавить селектор класса .d в качестве селектора для вашего первого правила, а затем добавить правило для переопределения цвета фона для .d:
.a .b .c,
.d {
background-color: #0000FF;
color: #ffffff;
border: 1px solid #c0c0c0;
margin-top: 4px;
padding: 3px;
text-align: center;
font-weight: bold;
}
.d {
background-color: green;
}
Это ответ на заданный вами вопрос, но я чувствую, что это не то, что вы ищете. Возможно, вам стоит опубликовать пример своей разметки и рассказать нам, какие стили вы хотели бы применить, чтобы мы могли помочь вам лучше.
Похоже, вы тут что-то напутали. Если вы хотите применить свойства в первом наборе скобок и к «.d», это нужно будет указать в списке выбора. Вам также необходимо разделить селекторы запятыми, чтобы они стали списком, а не наследованием.
Пример:
<html>
<head>
<style type = "text/css">
.a, .b, .c, .d { background-color: #0000FF; color: #FF0000; border: 1px solid #00FF00; font-weight: bold; }
.d { background-color: white; }
</style>
</head>
<body style = "background-color: grey;">
<p class = "a">Lorem ipsum dolor sit amet.</p>
<p class = "b">Lorem ipsum dolor sit amet.</p>
<p class = "c">Lorem ipsum dolor sit amet.</p>
<p class = "d">Lorem ipsum dolor sit amet.</p>
</body>
</html>
Я думаю, вы думаете об этом немного задом наперед, поэтому давайте попробуем разобраться в языке, который вы используете.
.a .b .c{
background-color: #0000FF;
color: #ffffff;
}
Глядя на приведенный выше CSS, часть «.a .b .c» - это селектор, а часть между фигурными скобками - это стиль. Этот селектор говорит: «Найдите мне все элементы с классом с« c », которые находятся внутри элементов с классом« b », которые находятся внутри элементов с классом« a », и примените к ним эти стили» - - это правило говорит, какие элементы на странице будут иметь желаемый вид.
Один и тот же элемент на странице может соответствовать более чем одному селектору, и существуют правила для того, в каком порядке они применяются к элементу (http://www.w3.org/TR/CSS2/cascade.html). Простое правило состоит в том, что более «специфические» селекторы имеют приоритет перед менее «специфическими» селекторами. "div.blueBanner p a: hover.highlight" гораздо более "специфичен", чем ".blueBanner". Если два правила имеют одинаковую специфичность, то приоритетом является то, которое появляется позже в файле CSS.
html образец:
<div class = "a">
<div class = "b">
<div class = "c">foo</div>
<div class = "c d">bar</div>
</div>
</div>
Итак, у вас есть селектор «.a .b .c» (как вы указали выше) и два элемента (foo и bar) на странице соответствуют этому селектору, поэтому все они получают цвет фона и все другие стили, которые вы определили.
Теперь вы также хотите, чтобы второй элемент имел зеленый цвет фона. Ему назначен другой класс «d», поэтому вы можете просто определить другой селектор, который соответствует только этому второму элементу «.a .b .d», и установить его цвет фона. Элемент «bar» по-прежнему получает все остальные стили из селектора «.a .b .c» (шрифт, цвет и т. д.), Но цвет фона из «.a .b .d».
.a, .b, .c, .d
{
background-color: green;
}
.a, .b, .c
{
background-color: #0000FF;
color: #ffffff;
border: 1px solid #c0c0c0;
margin-top: 4px;
padding: 3px;
text-align: center;
font-weight: bold;
}
это ты имел ввиду?
порядок определений очень важен, потому что последнее будет применяться.
Можете ли вы привести пример вашей разметки и рассказать, какие стили вы хотели бы применить к каждому элементу? Я думаю, здесь может быть фундаментальное непонимание css ...