CSS и переопределение стилей на вложенных элементах - PullRequest
Новая
       9

CSS и переопределение стилей на вложенных элементах

9 голосов
/ 21 апреля 2009

Это возникло из-за другого вопроса, который был задан здесь , но я полагаю, что это, вероятно, подход "передовой практики".

При разработке веб-сайта дизайнер, скорее всего, соберет набор общих стилей для всех элементов веб-сайта. (Стандартные шрифты для текста в Divs / Spans / H1 / H2s)

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

Table
{
   border: dashed 1px #333333;
   padding: 2px;
}

Однако, если у вас есть таблица в таблице (из примера RSolberg , AJAX Calender в DataGrid), то обе ваши родительские и вложенные таблицы будут наследовать эти стили. (Предположим, поэтому они называются каскадными)

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

Если вы просто предоставите переопределение, которое отменяет любой стиль, который вы применили.

, например 

Table
{
   border: dashed 1px #333333;
   padding: 2px;
}

Table Table
{
   border: solid 0px #000000;
   padding: 0px;
}

Ответы [ 4 ]

12 голосов
/ 21 апреля 2009

Если у вас есть HTML, как это: 


<html>
  ...
  <body>
    <div>
      <div>
      <div>
    <div>
  </body>
</html>

Вы можете применять стили только к div, который является дочерним для элемента body, используя дочерний селектор (><code>) like this:</p> <pre> body > div { border:solid 1px orange; }

Вложенный div не получит границы.

Для получения дополнительной информации, пожалуйста, посетите: http://www.w3.org/TR/CSS2/selector.html#child-selectors.

Обратите внимание, что Internet Explorer 6 не поддерживает дочерний селектор .

3 голосов
/ 21 апреля 2009

Да. Правило «таблица таблиц» переопределит правило «таблица», потому что оно более конкретно . То, что вы описали, - лучший способ иметь один стиль для самой внешней таблицы и другой стиль для внутренних таблиц - при условии, что ни у одной таблицы нет класса или идентификатора, который позволил бы вам использовать больше семантических селекторов.

На практике вам, скорее всего, придется использовать эту технику со списками. 

ol { list-style: upper-roman }
ol ol { list-style: upper-alpha }
ol ol ol { list-style: lower-roman }
ol ol ol ol { list-style: lower-alpha }
1 голос
/ 21 апреля 2009

Добавление класса или идентификатора во внешнюю таблицу: 

<style type="text/css"> 
.outer {border: dashed 1px #333333;} 
</style> 
</head> 
<body> 
  <table class="outer"> 
  <tr><td>before inner table. 
    <table> 
    <tr> 
    <td>Inside inner table.</td> 
    </tr> 
    </table> 
    After inner table. 
    </td> 
  </tr> 
  </table>     
</body>

Посмотри здесь

Если вы не можете добавить идентификаторы или классы в HTML и предполагать, что таблица, которую вы хотите стилизовать, находится за пределами другой таблицы, вы можете стилизовать ее, указав, какой элемент является потомком: 

div > table {border: dashed 1px #333333;}

Смотри здесь

Хотя этот селектор был реализован только в IE7, поэтому, если вам нужно поддерживать IE6, вам придется использовать метод переопределения из вопроса.

0 голосов
/ 21 апреля 2009

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

Всегда создавайте базовое правило и добавляйте в таблицу стилей исключения из этого правила.

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

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

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

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

...