CSS - вложенный DIV: очистка подстилей - PullRequest
Новая
       18

CSS - вложенный DIV: очистка подстилей

2 голосов
/ 12 мая 2009

Я уверен, что это возможно даже из-за природы CSS и каскадирования, но я все равно попробую.

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

Я подумал, используя свойство с добавленным свойством overflow: 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? Может быть, мне нужно принять совершенно другой подход к этому.

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

Заранее спасибо!

Ответы [ 3 ]

4 голосов
/ 12 мая 2009

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

Таким образом, вы можете иметь определение 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 голосов
/ 12 мая 2009

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

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

#t&c p {...}

#t&c a:link,
#t&c a:visited {...}
0 голосов
/ 12 мая 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...