Question

这是我的代码：

<table width="562" cellspacing="0" cellpadding="0" border="0" align="center" class="genericClass">
     Some nested tags
</table>

我的风格是：

table.genericClass  a { ...  } 
table.genericClass  p,li,div,td {}

但是所有div，p以及所有列出的标签都获得了上面提到的不期望的样式。我的语法错了吗？

Answer 1

现在，您要从DOM中选择所有div，li和td。如果要仅使用类genericClass将样式添加到表中的元素，则代码应为：

table.genericClass a {
  /**your properties and values here**/
} 
table.genericClass p,
table.genericClass li,
table.genericClass div,
table.genericClass td {
  /**your properties and values here**/
}

或者如果您想单独设置它们的样式：

table.genericClass p{
  /**your properties and values here**/
}
table.genericClass li{
  /**your properties and values here**/
}
table.genericClass div{
  /**your properties and values here**/
}
table.genericClass td {
  /**your properties and values here**/
}

Answer 2

尝试为要设置样式的标记提供类。我在下面创建了一个例子：

<div class = "div-Class"></div>
<ul>
   <li class = "li-Class">Lorem lipsum dolor sit amet.</li>
<ul>
<p class = "para-Class">Lorem lipsum dolor sit amet.</p>
<table>
    <tr>
        <td class = "table-data">Lorem lipsum dolor sit amet</td>
    </tr>
</table>

然后根据需要在CSS样式表中使用。为了消除将一个类提供给div的可能性，然后在样式表中拼错了该类，将该类复制并粘贴到样式表中。一个例子如下：

.div-Class {
    /* Some Styles */
}

.li-Class {
   /* Some more Styles */
}

para-Class {
   /* Even more Styles */
}

table-data {
   /* Some Table Styles */

希望这有帮助！

选择性造型css3

2 个答案: