Question

我在样式表中有以下内容：

.tab {
    background-color: #1A1A1A; 
    color: #A17749; 
    font-family: Verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    float: right;
    padding: 7px;
    margin: 0 0 0 10px;
}

.tab .select {
    height: 55px;    
}

然后我有一个html文件：

<div id="content">
        <div class="tab select"><a href="#">Pricing</a></div>
...

但是某种程度上没有应用css类选择。有什么想法吗？

Answer 1

您的选择器显示“选择类的成员，它是选项卡类成员的后代”。

要说“选择类的成员也是选项卡类的成员”，请删除空格。

.select.tab {

请注意this will not work properly in IE6。

Answer 2

.tab .select {必须为.tab.select {

.tab .select { //<- applies to tag with .select class which is child of tag with .tab class

.tab.select  { //<- applies to tag with classes .tab and .select

Answer 3

选择器之间的空格意味着您要将后面的规则应用于第一个选择器的所有后代。

删除空格，它将起作用：

.tab .select {
    height: 55px;    
}

如果您的标记是：

，您的选择器就会起作用

<div id="content">
        <div class="tab">
          <div class="select">
             <a href="#">Pricing</a></div>

将另一个css类应用于元素

3 个答案: