Question

我有几张桌子。所以我使用了datatable.css。要处理标题，我使用

     .order-table-header{}

（所以我用一个类作为标题）

我现在想要区分我的表，所以逻辑上使用id，类似的东西：

#Other{}

但它没有做#Other {}

中的内容

这是我的代码：

.order-table-header{
text-align:center;
background:none repeat scroll 0 0 #dddddd;
border-bottom:1px solid #BBBBBB;
padding:16px;
width: 8%;
background-color: #0099cc;
color: #ffffff;
line-height: 3px;
}
#Other .order-table-header{
background-color: #00ff00;
}

我尝试了相反的方式

 .order-table-header #Other{}

我尝试了其他的

#Other{}

这是我的xhtml：

      <h:dataTable value="#{workspace.otherfiles}" 
                   var="item"
                   styleClass="datatable.css"
                   headerClass="order-table-header"
                   rowClasses="order-table-odd-row, order-table-even-row"
                   id="Other">

我也尝试过：

.order-table-header(@background : #0099cc){
text-align:center;
background:none repeat scroll 0 0 #dddddd;
border-bottom:1px solid #BBBBBB;
padding:16px;
    width: 8%;

    background-color: @background;

    color: #ffffff;
    line-height: 3px;
}
#Other {
 .order-table-header(#00ff00);
}

但netbeans告诉我为第一行和其他

中的行找到了意外的符号

Answer 1

.order-table-header #Other（注意header和#Other之间的空格）意味着：“id为'Other'的节点，它是具有类'order-table-header'”的节点的后代。因此，具有id“Other”和类“order-table-header”的节点将不匹配具有模式.order-table-header #Other的CSS规则。但是，节点可以匹配多个规则。尝试将第一个示例的相应部分更改为：

#Other {
  background-color: #00ff00;
}

Answer 2

试试这个#Other .order-table-header{ css }，因为#Other将是表的id，而.order-table-header将是表头的类

CSS - 如何在类中选择id

2 个答案: