Question

我正在开发一个生成HTML的CMS插件。我想让用户以他们想要的方式设置HTML样式。这是HTML：

<div id="ss:">
<table>
    <colgroup>
    <col span="1">
    <!-- span can range from 3 to 6. -->
    <col span="4">
    <col span="4">
    </colgroup>
    <thead>
    <tr>
        <th rowspan="2">Variable text goes here</th>
        <!-- span can range from 3 to 6. -->
        <th colspan="4">Responses</th>
        <th colspan="4">Percentage</th>
    </tr>
    <tr>
        <!-- this row could contain from 6 to 12 headings -->
        <th>Small</th>
        <th>Med.</th>
        <th>Large</th>
        <th>Tot.</th>
        <th>Small</th>
        <th>Med.</th>
        <th>Large</th>
        <th>Tot.</th>
    </tr>
    </thead>
    <tbody>
    <!-- one more more rows with this structure -->
    <tr>
        <th>1. What size Coke do you prefer?</th>
        <td>24</td>
        <!-- largest number surrounded by strong tags -->
        <td><strong>28</strong></td>
        <td>0</td>
        <td>52</td>
        <td>46</td>
        <!-- largest percent surrounded by strong tags -->
        <td><strong>54</strong></td>
        <td>0</td>
        <td>100</td>
    </tr>
    </tbody>
</table>
</div>

我已将带有ID的HTML放在div中，以允许用户只选择其中的元素。所以我的问题是：

样式表可以在不使用类的情况下设置每个元素的样式，即使这意味着使用像nth-child这样的伪类吗？

这是一个好习惯吗？如果没有，那么什么是好策略？

我实际上可以为每个元素生成一个类，但是那个“好”和“那个疯狂”之间的界限在哪里？

Answer 1

样式表可以在不使用类的情况下设置每个元素的样式，即使这意味着使用像nth-child这样的伪类吗？
绝对。目标元素有很多种方法。到达所有nth-child，td和th后，您必须使用tr。

#ss:,
table,
colgroup,
col,
[span="1"],
[span="4"],
thead,
tr,
th,
[rowspan="2"],
[colspan="4"],
tbody,
td,
td strong {
    // css
}

这是一个好习惯吗？如果没有，什么是好策略？
反对使用nth-child的论点是浏览器必须处理每个子元素以进行数学运算并找到正确的元素，但使用类或ID它可以更容易地找到正确的元素。因此，浏览器更容易处理css定位类和ID。我本周刚刚阅读了有关浏览器处理n-child的内容，但我无法找到该文章以供参考。我是nth-child引用

的CSS Tricks页面的忠实粉丝

我实际上可以为每个元素生成一个类，但是那个“好”和“那个疯狂”之间的界线在哪里？
每个人都有自己疯狂的定义。给行一个类很有帮助，然后让用户进入nth-child深度。

Answer 2

为什么需要ID或类？只是定位元素本身

h1 {
  ...
}

h2 {
  ...
}

h3 {
  ..
}

etc...

您可以像this SO post一样动态定位样式表。

同样，对于记录，按类显示的DOM查找速度明显快于ID。谷歌的快速搜索会告诉你比我更多的事情。

样式表可以并且应该样式化此HTML中的每个元素吗？

2 个答案: