CSS и вложенные таблицы

[Oscar]

Вопрос:
Если у элемента TD нет собственного стиля, броузер будет искать подходящий стиль:

1) вверх по иерархии элементов ([thead|tbody], TR, TABLE)
2) вверх по иерархии элементов с таким же именем (TD)?
3) ваш вариант

:?:

Код: Выделить всё

<style>
table.main {
}

table.main td {
	color: #FF0000;
	background-color: #FFFFFF;
}

table.list {
	color: #0000FF;
	background-color: #FFFFFF;
}

table.list td {
}

</style>

<table class="list" border="1">
		<tr><td>table class="list"</td></tr>
</table>





<table class="main" border="1">
		<tr><td>

		table class="main"

		<table class="list" border="1">
				<tr><td>table class="list"</td></tr>
		</table>

		</td></tr>

</table>

Полный W3C-валидный код

Цвет вложенной таблицы получается красным, хотя я ожидал увидеть его синим ..

Может я семантически неправильно CSS написал?

[Duncon]

Ну разбирать времени нет, а вот пару ошибочек
table.main { -----подкласс table впринцыпе можно написать просто .main
}
А во здесь уже ошибка td отдельный элемент
table.main td {
color: #FF0000;
background-color: #FFFFFF; }
</style>
Вообще ты пишешь элемент типа table {и описываешь как ты видишь;}
И если надо создаешь подкласс table.main { ;}

да и есть проблема внутри таблицы стили отрубаются..
Ну и грамотней лучше сделать несколько таблиц чем 1 большую

[Oscar]

Duncon, по поводу ошибки - ты не прав.

[Oscar]

Код: Выделить всё

<style>
span.test {
	color: #FF0000;
}
span.test b {
	color: #0000FF;
}
b {
	color: #00FF00;
}
</style>

<span class="test">

test


[b]test2[/b]

</span>



[b]test3[/b]

судя по твоему ответу, ты будешь весьма удивлён тому, что получишь в результате этого кода.

[Duncon]

Да, внатуре, ссори оплашал.
Я стили строю подругому, подклассы на конкретный тег вешаю,
и как следствие твоей формой записи не поьзуюсь.

Код: Выделить всё

TD {font-size:10pt}
.p {color: #ffff45; font-size: 11px; font-family: Verdana, Tahoma}
.p2 {color: #ff6000; font-size: 11px; font-family: Verdana, Tahoma}
.p1 {color: #00ffff; font-size: 10px; font-family: Verdana, Tahoma}

[Oscar]

Duncon,

Код: Выделить всё

<style type="text/css">
table.formattable {

	border:2px dashed #2758CE;

}	table.formattable thead {

	border:1px solid #B9CAED;
	background-color: #B9CAED;

	font-size: 14px;
	font-weight:bold;
	text-align: center;

}	table.formattable tbody td {

	border:1px solid #B9CAED;

}
</style>

<table class="formattable">
	<thead>
		<tr>
			<td colspan="4">title</td>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
	</tbody>
</table>

обрати внимание, что стиль вешается всего в одном месте.
---

Нет, ну моя первая проблема решается таким образом, что на TD вложенной таблицы накладывается стиль с нужным цветом.
Хотя и не понятно, по какой системе выбирается стиль.

Намного интереснее получается, если вложить вторую таблицу в первую, а потом ещё одну таблицу со стилем, равным стилю первой, во вторую 8)

Вот код (таблицы упрощённо моделируются DIVами)

Код: Выделить всё

<div class="x1">



ЦВЕТ1

<div class="x2">



ЦВЕТ2

<div class="x1">



Как ни странно, - ЦВЕТ 2

</p>
</div>
</p> (Validator error: end tag for element "P" which is not open)
</div>
</p> (Validator error: end tag for element "P" which is not open)
</div>

Полный W3C-валидный код

Таким образом, могу сделать вывод, что броузеры не поддерживают рекурсию CSS-классов, формата "ELEMENT.CLASS ELEMENT".

[Duncon]

Извращенец,- спокойно не живеться.