Как выбрать содержимое в этом каскаде CSS?

Question

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

Текущий стек div находится ниже. Я использую панели, поэтому он добавляет несколько divs.

<div id="crhub" class="panel-flexible crhub clearfix">
 <div class="panel-flexible-inside crhub-inside">
  <div class="crhub-left">
   <div class="panels-flexible-column panels-flexible-column-crhub-1 panels-flexible-column-first ">
    <div class="inside panels-flexible-column-inside panels-flexible-column-crhub-1-inside panels-flexible-column-inside-first">
     <div class="panels-flexible-row panels-flexible-row-crhub-3 panels-flexible-row-first clearfix ">
      <div class="inside panels-flexible-row-inside panels-flexible-row-crhub-3-inside panels-flexible-row-inside-first clearfix">
       <div class="panels-flexible-region panels-flexible-region-crhub-cr_logo panels-flexible-region-first panels-flexible-region-last cr-logo">
        <div class="inside panels-flexible-region-inside panels-flexible-region-crhub-cr_logo-inside panels-flexible-region-inside-first panels-flexible-region-inside-last">
         <div id="#cr-logos" class="panel-pane pane-page-site-name">
          <div class="pane-content"> TEST </div>

Когда я выбираю «ТЕСТ» на сайте firebug, управляющий CSS как следующий, взятый из моего файла local.css.

body {
    color: #000000;
    font-family: "Lucida Grande","Lucida Sans Unicode",sans-serif;
    font-size: 81.3%;
    font-size-adjust: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.538em;
}

Предполагаемый стиль в моем local.css не является чем-то необычным.

{
  color: #669900;
  font-weight: bold;
  font-size: xx-large; 
}

EDIT: Классы, определенные панелями, встречаются везде, где я использую панель на странице или сайте. Мне нужна конкретная CSS, чтобы привязать это к конкретному тексту на этом конкретном контенте. Вот почему я добавил ID # cr-logos, но я не могу изолировать этот ext.

Я пробовал много комбинаций для выделения текста, но ничто не отменяет определение базового тела в CSS выше. Все эти div, идентификаторы и классы меня запутали. Меня также смущают имена классов, такие как "class="panel-pane pane-page-site-name". Это два класса, перечисленных вместе, или только один?

Answer 1

Похоже, вам просто нужно удалить "#" из атрибута id вашего div.

<div id="cr-logos" class="panel-pane pane-page-site-name">
  <div class="pane-content"> TEST </div>
</div>

И тогда это должно быть так же просто, как выбрать .pane-content с помощью селектора-потомка:

#cr-logos .pane-content {
    color: #669900;
    font-weight: bold;
    font-size: xx-large;
}

Answer 2

"class="panel-pane pane-page-site-name"

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

Если .pane-content не работает, попробуйте поставить! Important рядом с CSSправила, как это:

.pane-content{
    font-weight:bold !important;
}

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

#crhub .panel-flexible-inside .crhub-left .panels-flexible-column .inside .panels-flexible-row .inside .panels-flexible-region .inside #cr-logos .pane-content{
    font-weight:bold;
    ...
}