Как наследуется стиль - PullRequest
Новая
       21

Как наследуется стиль

0 голосов
/ 21 сентября 2008

Как сделать так, чтобы стиль имел все свойства стиля, определенные в .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 ]

3 голосов
/ 16 октября 2012 
.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;
}

это ты что имел ввиду?
порядок определений очень значим, потому что последнее будет применяться.

2 голосов
/ 21 сентября 2008 
.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;}
1 голос
/ 21 сентября 2008

Кажется, у вас там все перемешано. Если вы хотите применить свойства в первом наборе скобок к «.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>
1 голос
/ 21 сентября 2008

Вы добавили бы селектор класса .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;
}

Это ответ на вопрос, который вы задали, но у меня есть ощущение, что это не то, что вы ищете. Может быть, вам следует опубликовать пример вашей разметки и сообщить нам, какие стили вы хотели бы применить, чтобы мы могли помочь вам лучше.

0 голосов
/ 21 сентября 2008

Я думаю, что вы думаете об этом немного задом наперед, поэтому давайте попробуем разобраться с языком, который вы используете. 

.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 pa: 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", и установить его background-color. Элемент "bar" по-прежнему получает все другие стили из селектора ".a .b .c" (шрифт, цвет и т. Д.), Но цвет фона из ".a .b .d".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...