проблема каскадных правил в css - PullRequest
Новая
       0

проблема каскадных правил в css

0 голосов
/ 17 декабря 2010 

<style>
div#b {
background-color:blue;

}
#b {
background-color:red;

}
</style>

<div id='a'> div a
    <div id='b'>
    div b
    </div>
</div>

У меня есть два вопроса с этим стилем и этим html. Почему div b принимает синий цвет? Я хочу знать правила каскадирования, где я могу узнать больше об этом? Мой второй вопрос: что мне делать с css, чтобы div b появлялся внутри div a?

Ответы [ 4 ]

3 голосов
/ 17 декабря 2010

CSS-селекторы работают на специфике.Более конкретные селекторы означают, что правила, определенные в этом селекторе, будут использоваться в пользу менее специфичного селектора.

Как правило:

  • селекторы элементов, такие как div, imgи т. д. имеют вес 1
  • селекторов класса, таких как .myClass, имеют вес 10
  • селекторов id, таких как #myId, имеют вес 100

Отсюда вы можете довольно легко определить, почему вышеперечисленное не удалось. 

div#b = 101
#b = 100

101> 100

3 голосов
/ 17 декабря 2010

div#b более конкретно, чем #b, потому что у вас есть селектор элемента.Первый селектор определяет, какой тип элемента искать, тогда как второй говорит, что это не имеет значения, пока он выбирает этот идентификатор.

div#b означает

Найти только div с идентификатором b.

, тогда как #b означает

Найти любой элемент с идентификатором b.

Следовательно, в силу специфики первое правило переопределяет второе правило.

Я не понимаю, что вы имеете в виду, когда #b появляется внутри #a, для меня это выглядит прекрасно, как вашеHTML структурирован.С другой стороны, у вас нет никаких правил CSS для #a, поэтому есть только цвет фона для #b.

EDIT: , если вы хотите, чтобы окно отображалосьвнутри другого блока добавьте к внешнему блоку отступы и, конечно, цвет фона: 

#a {
    background-color: yellow;
    padding: 1em;
}
0 голосов
/ 17 декабря 2010

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

Попробуйте выполнить следующее: 

<style>
div.inside
{
    background-color: red;
    padding: 5px;
}
div.outside
{
    background-color: green;
    padding: 5px;
}
</style>
<div class="outside">
This is text in the outside div.
<div class="inside">
inside
</div>
</div>

Вы должны увидеть тонкую зеленую полосу (шириной около 5 пикселей) слева, справа и снизу внутри div.Это не единственный способ получить этот эффект.

0 голосов
/ 17 декабря 2010

Некоторые ссылки на правила CSS см .:

http://css -tricks.com / Специфические-на-CSS-специфичностью /
http://htmlhelp.com/reference/css/structure.html#syntax

Используйте display: inline, чтобы div b отображался внутри a: 

<style>
div#b {
background-color:blue;
display: inline;
}
#b {
background-color:red;

}
</style>
<body>
<div id='a'> div a
    <div id='b'>
    div b
    </div>
end div a
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...