Почему не отображается это объявление CSS? - PullRequest
Новая
       4

Почему не отображается это объявление CSS?

2 голосов
/ 09 ноября 2011

Есть ли причина, по которой объявление CSS не отображается в браузере?

Вот пример моего файла CSS: 

.adv {
color:#47463D;
}

.earnings {
color:#B4FF00;
}

Когда я выполняю <font class=adv>hello</font>, оно работаетугощение.

Когда я делаю <font class=earnings>hello</font>, цвет, указанный для .earnings, не отображается в браузере.

Страница связана с правильным файлом CSS.

Ответы [ 6 ]

4 голосов
/ 09 ноября 2011

Скорее всего, где-то на вашей странице у вас есть стиль, специфика которого заменяет .earnings (см. на этой странице ).CSS применяется по шкале весов, поэтому все, что имеет больший вес (расчетную специфичность), имеет приоритет над тем, что вы думаете может быть применено.

Лучше всего использовать что-то вроде Firebugрасширение Firefox) или инспектор Chrome, чтобы узнать, какой стиль действительно применяется .

Пример (И, кстати, порядок CSS не имеет значения) 

<style>
  /* what you think is applied */
  .foo { color: red; }

  /* What is being applied due to specificity */
  #bar .foo { color: green; }
</style>

<span class="foo">.foo</span> <!-- color is red -->

<div id="bar">
    <span class="foo">#bar .foo</span> <!-- color is actually green -->
</div>
2 голосов
/ 09 ноября 2011

Последняя точка с запятой в объявлении CSS является необязательной, так что это не ваша проблема.

Скорее всего, у вас есть другие стили, которые имеют более высокий приоритет. Правила приоритета CSS могут быть немного странными; наиболее распространенным камнем преткновения является то, что высокоспецифичное объявление имеет приоритет перед последующими, менее специфичными

Пример из HTMLdog.com:

  div p { color: red; }
  p { color: blue; }

При использовании этой таблицы стилей все элементы p внутри div будут окрашены в красный, а не синий.

Что я действительно советую вам сделать, так это получить приличный плагин инструментов разработчика для вашего браузера (например, Firebug на Firefox) и просмотреть трассировку стилей; он расскажет вам, что переопределяется и чем.

2 голосов
/ 09 ноября 2011

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

<a class="adv">hello</a>
<font class="earnings">hello</font>

Наконец, если у вас есть несколько параметров CSS в .earnings, вам нужно ставить точку с запятой после каждого.

1 голос
/ 09 ноября 2011

Я не уверен, что вы собираетесь закрыть тег шрифта тегом, но следующий код работает просто отлично: 

<html>
  <head>
    <title>CSS Color Example</title>
    <style type="text/css">
      .adv {color:red;}
      .earnings {color:red;}
    </style>
  </head>
  <body>
    <div class=adv>hello</div>
    <div class=earnings>hello</div>
  </body>
</html>
1 голос
/ 09 ноября 2011

Добавьте точку с запятой после цветовой линии. 

.adv {
color:#47463D;
}

.earnings {
color:#B4FF00;
}

Кроме того, вы должны использовать двойные кавычки вокруг ваших классов в html вместе с соответствующими закрывающими тегами: 

<font class="earnings">hello</font>

Ваш второй тег шрифта анализируется как внутри первого, и не отображается.

0 голосов
/ 09 ноября 2011

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

Можете ли вы привести jsfiddle пример вашей проблемы?

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

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

...