самый быстрый способ использовать CSS для таблицы HTML, не влияя на другую таблицу HTML
Область, где я чаще всего нахожу это, - это функции обратного вызова. Эта запись также может использоваться в тех случаях, когда вам нужно включить переменную в функцию обратного вызова, но вам нужно, чтобы состояние переменной не зависело от того, что происходит вне функции.
var someVal = 1;
setTimeout( (function(one) {
return function() {
alert(one); // alerts a 1 even 10 seconds after someVal++;
}
})(someVal), 10000);
someVal++; // the value in the setTimeout will remain the same as it is locked inside.
В этом контексте setTimeout принимает функцию, которая не принимает аргументов. Таким образом, на вопрос о том, как передать значение этой функции, необходимо создать функцию, которая принимает один аргумент и возвращает функцию, которая принимает 0 аргументов.
Я предлагаю всем, кто хочет узнать больше о мощи этой нотации, поиграть с ней в консоли Firebug JavaScript. Обдумав эту концепцию, вы начнете видеть области, в которых эта мощная концепция может быть использована.
6 ответов
Можете ли вы просто применить класс к таблице, на которую вы хотите воздействовать, а затем использовать этот класс в своем 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; }
Именно для этого нужны атрибуты id и class. Если вы не можете изменить разметку (например, стилизовать myspace), вам нужно использовать селекторы для более точного нацеливания на одну таблицу. Выбор селекторов - это то, что вам нужно решить самостоятельно.
Определите ID или КЛАСС в вашем CSS, который повлияет на рассматриваемую таблицу.
Затем в вашем коде HTML, скажем,
<table id="theid"... />
или
<table class="theclass" ... />
ID CSS выглядит как
#theid
{
//attributes
}
Классы выглядят так:
.theclass
{
//attributes
}
Вот селекторы классов и разметка, которые будут стилизовать первую таблицу, но не вторую:
<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>
Или вы можете использовать селектор идентификатора аналогичным образом :
<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 (но большинство браузеров позволяют вам нарушить это правило).
Применить имя класса к таблице, к которой вы хотите применить css. Остальное в порядке ...
Хотя вам следует добавить класс в таблицу, на которую вы хотите воздействовать, давайте предположим, что вы можете изменить только CSS. В этом случае вы можете нарядиться с селекторами . Но не все браузеры поддерживают их. Вы можете видеть, что селекторы 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>
, вы можете настроить таргетинг на первый с помощью селекторов CSS2, но второй и третий можно настроить только с помощью селекторов CSS3.
table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */