2009-05-12 5 views
2

Я уверен, что если это возможно даже из-за характера CSS и каскадирования, но я все равно попробую.CSS - Вложенные DIV: Очистить вспомогательные стили

Я создаю окно с условиями и положениями, которое будет содержать некоторые ключевые элементы, которые пользователь выберет. Так как T & C будет иметь компоненты формы (переключатели, флажки). Я действительно не хочу, чтобы я столкнулся с проблемой помещать его в IFrame и таким образом вводил пользователя.

Я понял, что с помощью переполнения: добавлено свойство auto, я мог бы создать прокрутку с помощью T & C и пользователь должен выбрать их варианты таким образом.

Ну, потому что у T & C есть какая-то отметка, на которую будут непосредственно влиять сайты css, мне нужно выяснить способ, чтобы этот div не использовал основной CSS-сайт.

Ниже приведен пример кода, который будет похож на подход, я пытаюсь:

<html> 
<head> 
    <style> 
     div 
     { 
      border: solid 1px #000; 
     } 
     div small 
     { 
      font-size: 17pt; 
     } 
    </style> 
</head> 
<body> 
    <div style="overflow: auto; width: 500px; height: 300px;"> 
     <small>This is small text</small> 
     <div> 
      <small>This is small text</small> 
      Lorem ipsum dolor sit amet, consectetur adipiscing 
      elit. Donec vulputate mi sed nisl blandit sed porttitor massa fringilla. 
     </div> 
    </div> 
</body> 
</html> 

Результатом этого является довольно небольшой черный ящик с текстом, а затем к югу от коробки с большим количеством текста и ключевым элементом здесь является текст, завернутый в <small/>.

Есть ли способ иметь что-либо под определенным div, не наследующим CSS? Возможно, мне нужно принять совершенно другой подход.

Мысль? Идеи? Предложения?

Заранее благодарен!

ответ

4

Вместо того, чтобы работать непосредственно с именами тегов, сохраняйте два набора классов («внутренний» и «внешний») и работайте с ними.

Таким образом, вы можете задать определение div.inner и определение div.outer и работать над ними отдельно. inner нужно было бы явно отменить настройки, но outer.

Что-то вроде

<div class="outer"> 
    <div class="outer">Some content. <small>Small text.</small></div> 
    <div class="inner container"> 
    <small>Blah blah blah</small> 
    More content 
    </div> 
</div> 

И в вашем CSS определить, что вам нужно,

div.outer { 
    border: 1px solid black; 
} 
div.outer small { 
    font: 17pt; 
} 
div.inner { 
    border: none; 
} 
div.inner small { 
    font: 15pt; 
} 
div.container { 
    overflow: auto; 
    width: 500px; 
    height: 300px; 
} 
+0

Хорошо, это то, что я боялся. Поэтому, если у моего субконтента есть тонна разных тегов, которые будут напрямую изменены из css, мне нужно будет создать классы CSS, как описано выше, чтобы изменить все мои теги ... Мне грустно, но первый шаг к горю отказ. – CodeLikeBeaker

0

не думаю, что есть способ, чтобы не наследовать CSS. я думаю, что единственный способ - «сбросить» все стили, установленные на родителях, явно. см., например, http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ для списка свойств по умолчанию.

0

В качестве вторых заметок нет возможности по существу предотвратить каскад стилей, это каскад, который определяет CSS в конце концов. Таким образом, вы сводились к использованию подхода .inner и .outer, который предложил Welbog.

Итак, вы сводились к определению ваших стилей для основного документа, как обычно. Однако для переопределения этих стилей для тех же элементов в разделе T & C вы должны явно переопределить/переписать стиль.Вы можете использовать два стилей, чтобы сохранить ясность, но вы должны помнить, в t_and_c.css явно предварить каждое объявление с идентификатором вмещающих DIV, например:

#t&c p {...} 

#t&c a:link, 
#t&c a:visited {...} 
Смежные вопросы