分层样式语法?

时间:2011-11-01 18:11:32

标签: css

我有一个问题......我想创建一个名为thumb的类w /每个项目和悬停的所有必要信息。然后我希望它们在父节点内具有自己的特定行为。这是我到目前为止所做的事情,而且它没有用。

.thumb
{
    display:block;
    float:left;
    width:10px;
    height:10px;
    margin:5px 10px 5px 10px;
}

.thumb:hover
{
    border:solid 1px #F00;
}


#commercial
{
    margin:0 auto;
    width:100px
}

#commercial.thumb
{
    background-color:#0A0;
}

#wedding
{
    margin:0 auto;
    width:100px
}

#wedding.thumb
{
    background-color:#00F;
}

#fashion
{
    margin:0 auto;
    width:100px
}
#fashion.thumb
{
    background-color:#F0F;
}

我也尝试在id中声明拇指为

#id > a.thumb

#id > .thumb
似乎什么都没有用。我认为这将是一个更有效的设置,因为它允许我改变每个拇指,无论父div只有一个代码块而不是3,任何见解都非常感激。

感谢, 布罗迪

2 个答案:

答案 0 :(得分:2)

#fashion.thumb表示您想匹配以下元素:

<div id="fashion" class="thumb">

将其拆分为#fashion .thumb(注意空格)是“任何带有'拇指'类的元素,它是ID为fashion的元素的下降,它将是:

<div id="fashion">
   <span class="thumb"></span>
</div>

答案 1 :(得分:1)

在我看来,你唯一需要改变的是:

.thumb
{
  display:block;
  ...
}

#commercial .thumb
{
  background-color:#0A0;
}

要表示.thumb元素必须是#commercial的子(直接或间接),2之间必须有空格。