在不影响另一个 html 表的情况下将 css 用于 html 表的最快方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1016409/
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
fastest way to use css for html table without affecting another html table
提问by cometta
My css is located at http://sillybean.net/css/seaglass.cssand i want to use this css for only one of html table, On the same page i have multiple html tables so i do not want to affect other html tables. What is the fastest way to do it with less modification on http://sillybean.net/css/seaglass.css?
我的 css 位于http://sillybean.net/css/seaglass.css，我只想将此 css 用于 html 表中的一个，在同一页面上我有多个 html 表，所以我不想影响其他 html表。在http://sillybean.net/css/seaglass.css上进行较少修改的最快方法是什么？
回答by MiffTheFox
Can you just apply a class to the table you want to affect, then use that class in your CSS?
您可以将一个类应用到您想要影响的表，然后在您的 CSS 中使用该类吗？
In your HTML, you can put:
在您的 HTML 中，您可以输入：
<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>
And then, add the class selector to your CSS:
然后，将类选择器添加到您的 CSS：
table.mytable { border-collapse: collapse; border: 1px solid #839E99;
background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }
回答by Sev
Define an ID or CLASS in your CSS that will affect the table in question.
在您的 CSS 中定义一个 ID 或 CLASS，这将影响相关表。
Then, in your HTML code, say
然后，在您的 HTML 代码中，说
<table id="theid"... />
or
或者
<table class="theclass" ... />
The CSS ID looks like
CSS ID 看起来像
#theid
{
//attributes
}
Classes look like:
类看起来像：
.theclass
{
//attributes
}
回答by vineetv2821993
For Multiple Table and Classes
对于多个表和类
HTML Table
HTML表格
<table id="tableId1">
--Table Content--
</table>
<table id="tableId2">
--Table Content--
</table>
<table class="tableClass1">
--Table Content--
</table>
<table class="tableClass2">
--Table Content--
</table>
CSS Script
CSS 脚本
#tableId1, #tableId2
{
//attributes
}
.tableClass1, .tableClass2
{
//attributes
}
回答by SpliFF
This is exactly what id and class attributes are for. If you can't change the markup (like styling myspace) then you need to use selectors to target the one table more precisely. The choice of selectors is something you'll need to decide yourself.
这正是 id 和 class 属性的用途。如果您无法更改标记（如设置 myspace 的样式），那么您需要使用选择器来更精确地定位一张表。选择器的选择需要您自己决定。
回答by Travis Wilson
Here are class selectors and markup that will style the first table but not the second:
以下是类选择器和标记，它们将设置第一个表格的样式，但不会设置第二个表格的样式：
<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>
Or you can use an ID selector in a similar fashion:
或者您可以以类似的方式使用 ID 选择器：
<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>
Sometimes a religious war breaks out about which of these two approaches to use. Either is fine for your needs. According to the spec, you can only put a given ID on at most one element in your HTML (but most browsers allow you to break that rule).
有时会爆发一场宗教War，关于使用这两种方法中的哪一种。两者都可以满足您的需求。根据规范，您最多只能在 HTML 中的一个元素上放置一个给定的 ID（但大多数浏览器允许您打破该规则）。
回答by dlamblin
While you should add a class to the table you want to affect, let's assume you can only modify the css. In that case you can get pretty fancy with selectors. But not all the browsers supportthem. You can see that the CSS 2 selectorsdon't support the n-th child concept. Otherwise, if you had html like:
虽然您应该向要影响的表添加一个类，但我们假设您只能修改 css。在这种情况下，您可以非常喜欢selectors。但并非所有浏览器都支持它们。您可以看到CSS 2 选择器不支持第 n 个子概念。否则，如果你有这样的 html：
<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>
You could target the first with CSS2 selectors, but the second and third can only be targeted with CSS3 ones.
你可以用 CSS2 选择器定位第一个，但第二个和第三个只能用 CSS3 选择器定位。
table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */
回答by Meetu Choudhary
Apply the Class name to the table on which you want to apply css rest is fine...
将类名应用于要应用 css rest 的表就可以了...
回答by user6632262
Select table by class for styling a desired table e.g if you have table:
按类别选择表格以设置所需表格的样式，例如，如果您有表格：
<table class="tableOne"></table>
<table class="tableTwo"></table>
Then in CSS, you will use something like this:
然后在 CSS 中，您将使用以下内容：
.classOne {
/* do your stuff here*/
}
.classTwo {
/* do your stuff here*/
}
