Reset несколько стилей CSS для одного элемента div
мой вопрос в том, возможно ли reset стили css (много от них) для одного div
и все элементы, которые содержатся в этом div.
Я спрашиваю, потому что я нашел этот учебник для jQuery, который имеет его собственный
css файл.
Я не могу просто скопировать стили в свой собственный файл css, потому что это затмит все остальное со страницы, где стили уже установлены.
Я пробовал использовать divwrapper и применять все эти сбросы только к этому.
Я просто не уверен, возможно ли это
Я знаю только этот путь
#divwrapper td{ set styles }
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
спасибо, Ричард
Ответы
Ответ 1
Попробуйте следующее:
div.foo, div.foo *
{
// your styles
}
который применит стили к div
с классом "foo" и всеми его потомками. Звезда (*
) известна как универсальный селектор , и, что не удивительно, выбирает элементы любого типа.
Или для непосредственных детей:
div.foo, div.foo > *
{
// your styles
}
Ответ 2
если это практично, вы можете поместить все содержимое в в iframe. Содержимое iframe ничего не наследует.
Ответ 3
Как уже упоминалось ранее @Noldorin, вам нужен селектор, который выбирает всех потомков (или детей) с помощью универсального селектора.
Для получения дополнительной информации о селекторах ознакомьтесь с документацией W3C. Информация о селекторе CSS2 здесь
Пример кода (я решил использовать селектор по идентификатору в отличие от класса), чтобы проиллюстрировать:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reset</title>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green;
}
#reset *{
color: black;
}
#resetc > *{
color: black;
}
</style>
</head>
<body>
<h1>With Descendant Reset Style</h1>
<div id="reset">
<div class="red">Red</div>
<p class="green">Green<span class="blue">Blue</span></p>
</div>
<h1>With Child Reset Style</h1>
<div id="resetc">
<div class="red">Red</div>
<p class="green">Green<span class="blue">Blue</span></p>
</div>
<h1>Without Reset Style</h1>
<div>
<div class="red">Red</div>
<p class="green">Green<span class="blue">Blue</span></p>
</div>
</body>
</html>
Ответ 4
Вероятно, вы имеете в виду что-то вроде этого:
http://snipplr.com/view/7438/