我的CSS位於http://sillybean.net/css/seaglass.css,我想用這個CSS只有一個HTML表,在同一頁上我有多個HTML表,所以我不想影響其他html表格。在http://sillybean.net/css/seaglass.css上進行少量修改的最快方式是什麼?最快的方式來使用CSS的HTML表格,而不會影響另一個HTML表格
7
A
回答
29
你可以將一個類應用到你想要影響的表,然後在你的CSS中使用該類?
在你的HTML,你可以把:
<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>
然後,類選擇添加到您的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; }
0
應用類的名稱,您要申請表css休息很好...
2
這正是id和class屬性的用途。如果您不能更改標記(如造型myspace),那麼您需要使用選擇器更精確地定位一個表格。選擇器的選擇是你需要自己決定的。
3
在你的CSS中定義一個ID或CLASS,這會影響到有問題的表。
然後,在你的HTML代碼,說
<table id="theid"... />
或
<table class="theclass" ... />
CSS的ID看起來像
#theid
{
//attributes
}
類的樣子:
.theclass
{
//attributes
}
1
這裏有一流的選擇和標記將樣式表頭,但不是第二:
<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>
或者你也可以用類似的方式使用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>
有時宗教戰爭爆發出使用這兩種方法中的哪一種。兩者都可以滿足您的需求。根據規範,您只能在HTML中的至多一個元素上放置給定的ID(但大多數瀏覽器允許您打破該規則)。
0
雖然您應該向要影響的表添加類,但我們假設您只能修改css。在這種情況下,您可以通過selectors獲得相當高的感覺。但不是所有的browsers support他們。你可以看到CSS 2 selectors不支持第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>
,您可以定位與CSS2選擇第一個,但第二個和第三個只能與CSS3的人進行有針對性的。
table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */
2
對於多表和類
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腳本
#tableId1, #tableId2
{
//attributes
}
.tableClass1, .tableClass2
{
//attributes
}
-1
按類別選擇表,如果你造型所需的表如有表:
<table class="tableOne"></table>
<table class="tableTwo"></table>
然後在CSS中,你會使用這樣的:
.classOne {
/* do your stuff here*/
}
.classTwo {
/* do your stuff here*/
}
相關問題
- 1. 影響JavaScript/CSS的HTML空間格式
- 2. 嵌入的html風格不影響表?
- 3. HTML表格覆蓋另一個表格
- 4. 從另一個HTML表格創建HTML表格的jQuery函數
- 5. 另一種形式的HTML表格
- 6. 表格的CSS懸停會影響表格邊框和td
- 7. HTML/CSS表格樣式
- 8. HTML表格 - 在瀏覽器中隱藏列而不影響colspans
- 9. 風格特定表,而不會影響每個表
- 10. CSS表格不影響我的佈局?
- 11. 使用CSS和HTML響應式網格
- 12. HTML:最快/最好的方法來更新一個大表
- 13. html表格格式
- 14. html表格格式
- 15. html - 從頁面最左邊顯示錶格的CSS方式
- 16. 使用HTML表格而不是Gridview
- 17. RTF格式的HTML刪除HTML表格
- 18. 一個HTML表格
- 19. 以另一種形式表格HTML
- 20. css對齊表格行,不使用另一個表格
- 21. 如何在一個HTML文件中的表格中使用另一個HTML文件中的表格中的值
- 22. 將html表格設置到另一個表格的右側
- 23. css格式是否會影響表單的有效性
- 24. HTML和CSS中的表格
- 25. 帶GRIDLINES的HTML/CSS表格
- 26. 刪除最後一個表格行以編程方式添加到HTML表格
- 27. HTML表格的格式不正確
- 28. html表格不會提交
- 29. 用CSS/html表格選擇
- 30. 表單的HTML和CSS格式化
事實上,這幾乎是像 「命名空間」 你的CSS定義。 – 2009-06-19 05:08:32
我到目前爲止不是CSS專家 - 但根據我的測試,上面的CSS中至少有一個錯誤:`.mytable td,th {/ * ... * /}`隻影響`td`(單元格)有'mytable'類(因爲表類) - **但**它影響**所有表頭**`th`。恕我直言,正確的語法必須是:`.mytable td,.mytable th {/ * ... * /}`。 (在Chrome,Firefox和IE的當前版本中測試過) – 2015-11-25 08:04:00