Собственно говоря почему два, можно и больше 
. Для этого всего лишь надо прописать их через пробел.
<a href="..." class="link first">....
Правила стилей применяются поочередно, и последний может отменить директивы первого.
В прошлый раз писался отдельный код для не IE браузеров, теперь код который понимают только IE. Слово “понимают” во множественном числе, потому что 7 версия тоже обладает недостатками, и теперь приходится учитывать и их тоже.
#myDiv {
margin : 10px 10px 10px 10px;
}
/* IE6 Only */
* html #MyDiv {
margin : 5px 5px 5px 5px;
}
/* IE7 Only */
*:first-child+html #MyDiv {
margin : 2px 2px 2px 2px;
}
В сети уже много раз это обсуждалось. Я одно время использовал код который экспортировала программа iweb, но уж очень грамоздкой он был. Вот вариант который наиболее прост и удобен.
Cкачиваем файл png_fix.css и прописывае его в вашем файле
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="png_fix.css" /> <![endif]-->
После этого, на тег содержащий прозрачный png, вешаем стиль.
<td class="png">...</td>
И все!
Помимо воздействия на элементы через атрибуты class и id еще в css2 были заложены селекторы которые сильно помогли бы, если б не игнорировались MSIE6 зато поддерживаются MSIE7 и всеми остальными хорошими браузерами
Три вариации:
A[attr="value"] - совпадает со всеми элементами у которых некий атрибут имеет значение “value”
A[attr~="value"] - совпадает со всеми элементами у которых некий атрибут имеет значение начинающееся с “value” дальше дефис и остальная часть. Например col-01, col-02
A[attr|="value"] - тоже самое что и предыдущий только вместо дефиса используется пробел
Теперь наглядно
<style>
a[title="open"] {
color: green
}
a[warning="warning"] {
color: yellow
}
a[rel|="copy"] {
color: maroon
}
a[rel ~="copy"] {
color: red
}
a[rel ~="copy"][title="close"] {
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" title="open">green |
<a href="#" warning="warning">yellow |
<a href="#" rel="copy-1">maroon |
<a href="#" rel="copy-2">maroon |
<a href="#" rel="copy 1" title="close">red with out line |
<a href="#" rel="copy 2">red
</body>
Примечание: можно играться с любым атрибутом кроме ID видимо из за того что у css на его счет свои инструкции
Уже в текущем CSS, есть множество удобных селекторов, которые работают во всех браузерах кроме IE6. И все потому что IE6 вышел раньше, чем успели утвердить многие из них, например :firs-child, :last-child или min|max-height. Что же делать? Отказывать себе в удовольствии, или ставить заглушки для старого мостра? Я предпочитаю второе.
#myelement{
height:200px;
}
html > body #myelement{
min-height:200px;
height:auto
}
выражение html > body не понятно для IE6, поэтому он его опускает, зато остальные с радостью исполняют.
На странице, в head прописываем
td {
text-align:left;
}
затем в коде таблици
<td align="right">text</td>
Кто кого перетянет? Конечно css, его дерективы стартуют после рендринга HTML. Поэтому для исправления нужен другой css
<td style="text-align:right;">text</td>
Было множество вариантов сделать красивую и тонкую рамку для таблиц. Самым ужасным способом времен NN4 было поместить таблицу в таблицу и играть на bgcolor и cellspacing. Зате в жизнь вошел css и многое стадо проще, например на таблицу даешь border-left border-top a на ячейки border-right и border-bottom.
Но есть способ намного проще и не требующего подобных извращений.
table{
border-collapse: collapse;
border: none;
}
td {
border:1px solid #c8c8c8;
}
основная фишка здесь конечно же border-collapse: collapse; которая нахлестывает друг на друга рамки рядомстоящих ячеек.
Недавно надо было сделать так, что-бы маркеры появлялись не с лева от списка, а справа. Сначала кинулся на дизайн, но потом понял что я этого зря, все намного проще:
дя этого надо всего лишь в теге LI указать dir=rtr или в css прописать direction:rtl;
... direction:rtl; ... <li dir="rtl">mysql
скажете для чего? наверное для этого
ul{ width:50px; margin:0px; }
li{
list-style: none;
list-style-image: url(images/greenball.png);
direction:rtl;
}
PS: пусть вас не смущает что пример в качестве имиджа, просто система не захотела принимать код, а так протестировано в Safari, Firefox, Opera и MSIE
Стили коментариев в кодах програмных языков
сначало сss,
#container {
top:50%;
position:absolute;
width:100px;
height:50px;
z-index:1;
/* hide from IE5/Mac \*/
left: 50%;
margin-left: -50px; /* половина значения width */
margin-top: -25px; /* половина значения height */
/* End hide from IE5/Mac \*/
}
затем сам див,
<div id="container">hello</div>
работает в:
windows -> IE, Mozilla, Opera
mac os x -> Safari, Mozilla, Opera и плохо в IE5/mac 
