CSS - 如何在类中选择一个 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9656102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - How to select an id inside a class
提问by SabineA
I have several tables. So I use a datatable.css. To deal with the header I use
我有几张桌子。所以我使用了一个datatable.css。处理我使用的标题
.order-table-header{}
(so I use a class for header)
（所以我使用一个类作为标题）
I want now to differentiate my tables so logically use an id, something like that :
我现在想在逻辑上区分我的表，使用一个 id，类似这样：
#Other{}
But it doesn't do what's inside the #Other{}
但它不会执行#Other{} 中的内容
here is my code :
这是我的代码：
.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;
}
I tried the other way around
我反其道而行之
.order-table-header #Other{}
I tried with just other
我试过其他的
#Other{}
Here is my xhtml :
这是我的 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">
I also tried :
我也试过：
.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);
}
but netbeans tell me unexpected symbol found for the firs line and for the line inside other
但是 netbeans 告诉我为第一行和其他行内的行发现了意外的符号
回答by gcbenison
.order-table-header #Other(note the space between header and #Other) means: "node with id 'Other' that is a descendant of node with class 'order-table-header'". So a node having id "Other" and class "order-table-header" won't match a CSS rule having pattern .order-table-header #Other. However a node can match more than one rule. Try changing the corresponding part of your first example to:
.order-table-header #Other（注意header 和#Other 之间的空格）表示：“id 为'Other' 的节点是类'order-table-header' 的节点的后代”。因此，具有 id "Other" 和类 "order-table-header" 的节点将不匹配具有 pattern 的 CSS 规则.order-table-header #Other。然而，一个节点可以匹配多个规则。尝试将第一个示例的相应部分更改为：
#Other {
background-color: #00ff00;
}
回答by Abhidev
try this #Other .order-table-header{ css }since the #Other will be the id of the table and .order-table-header will be the class of the table header
试试这个，#Other .order-table-header{ css }因为 #Other 将是表的 id，而 .order-table-header 将是表头的类
