Нацелить класс css внутри другого класса css


91

Привет, у меня проблемы с некоторыми классами css в joomla. У меня есть два блока div в модуле, один - это оболочка class = "wrapper", другой - content class = "content". Контент находится внутри оболочки. Что я пытаюсь сделать, так это нацелить стиль css на класс содержимого. Обычно я просто помещаю .content {информацию о моем стиле} в таблицу стилей, но проблема в том, что этот класс используется несколько раз на странице. Итак, в бэкэнде вы можете присвоить модулю имя класса, поэтому я назвал его .testimonials.

Чтобы я не изменял все другие классы контента на странице, я пытаюсь настроить таргетинг на нее, поместив это:

.testimonials .content {my style info I am trying to apply} 

но это не работает, я знаю, что вы можете сделать это с помощью div, поэтому

#testimonials .content {my style info I am trying to apply} 

но мой вопрос: можно ли это сделать с помощью классов ?, если что-то идет не так, поскольку я пытаюсь использовать следующее:

.testimonials .content {font-size:12px; width:300px !important;}

поскольку по какой-то причине контент не обертывается и просто исчезает со страницы в конце абзаца, поэтому я пытаюсь убедиться, что класс 1-го уровня, в котором находится контент, ничего не перекрывает, странно, даже если я исправлю класс div, в котором находится контент, до 50 пикселей, он по-прежнему не переносит текст, поэтому я не уверен, правильно ли я нацелен на него?.

редактировать >>>>>>>>>> ..

HTML-код, создаваемый Joomla, выглядит примерно так >>

<div class="wrapper">
<div class="content">SOME CONTENT</div
</div>

затем он завернут в миллион других div в старом добром стиле Joomla.

Я присвоил модулю класс отзывов, поэтому он выглядит примерно так:

<div class="testimonials">
 <div class="wrapper">
<div class="content">SOME CONTENT</div
</div>
</div>

РЕДАКТИРОВАТЬ 3 >>>>>>> ОК, это то, что он выплевывает

<div class="testimonials">
   <div class="key4-block">
      <div class="module-title"><h2 class="title">Client Testimonials</h2></div>
         <div class="key4-module-inner">
            <div class="module-content">                                
               <script type="text/javascript">
                 RokStoriesImage['rokstories-184'].push('');
                 RokStoriesImage['rokstories-184'].push('');
                 RokStoriesImage['rokstories-184'].push('');
            </script>
         <div id="rokstories-184" class="rokstories-layout6 content-left"  >
           <div class="feature-block">        
            <div class="feature-wrapper">
              <div class="feature-container">
                 <div class="feature-story">
                    <div class="image-full" style="float: right">
                        <img src="/sos/" alt="image" />                            
                    </div>
                    <div class="desc-container">
                        <div class="wrapper">                                                        
                           <span class="content"><p>Arrived in under 30 mins and got my pride and joy home in one piece, the day it conked out on me.</p>
                           <p>- Mr A Another</p></span>                                
                        </div>
                    </div>
                </div>
                <div class="feature-story">
                   <div class="image-full" style="float: right">
                      <img src="/sos/" alt="image" />                            
                   </div>
                   <div class="desc-container">        
                      <div class="description">                                                        
                         <span class="feature-desc">
                            <p>Great Service ! , SOS came to the rescue me in no time at all and made my day.</p>
    <p>- a customer</p>
                          </span>                                
                      </div>
                   </div>
                </div>
              </div>
           </div>
        </div>
      </div>

РЕДАКТИРОВАТЬ 4 >>>>>>

Это то, что он делает

введите описание изображения здесь


Ну, пока вы не покажете соответствующую разметку HTML, мы вообще не узнаем, на что вы нацеливаетесь ...
Дэвид говорит,

Привет, это невозможно, так как html создается самой joomla, его часть сборки в модуле ленты новостей я пытаюсь изменить
Иэн Симпсон,

Так? Позвольте ему отобразить страницу, а затем «просмотрите исходный код» и скопируйте / вставьте соответствующий отрывок из источника. Без чего-то, что можно увидеть, мы просто блуждаем в темноте, и это неконструктивно для реальных ответов, и мне придется проголосовать за закрытие как «не настоящий вопрос». Чего я бы предпочел не делать, если есть шанс действительно помочь тебе.
Дэвид требует восстановить Монику на работе

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

Ответы:


115

Не уверен, как выглядит HTML (это поможет с ответами). Если это

<div class="testimonials content">stuff</div>

затем просто удалите пробел в своем CSS. А-ля ...

.testimonials.content { css here }

ОБНОВИТЬ:

Хорошо, после просмотра HTML посмотрите, работает ли это ...

.testimonials .wrapper .content { css here }

или просто

.testimonials .wrapper { css here }

или

.desc-container .wrapper { css here }

все 3 должны работать.


спасибо, я попробую, я бы опубликовал некоторый html, но он сгенерирован Joomla, так что у меня есть только миллион php файлов
Иэн Симпсон

хм, это действительно странно, если я поставлю .content просто сам, а затем помещу 300 пикселей на страницу с изменением содержимого класса на 300 пикселей, кроме того, что я хочу изменить, при дальнейшей проверке с помощью firebug его класс также является содержимым , поэтому я понятия не имею, что вызывает это, думаю, мне, возможно, придется упаковать сайт и загрузить его, чтобы показать всем, что он находится на локальной установке в мес.
Iain Simpson

Ну, по крайней мере, нам нужно увидеть немного HTML. Возможно, не всю страницу, но хотя бы соответствующий раздел.
Скотт

Я пробовал описанное выше, но все равно не пошло, обертка - это класс, так что не должно быть .wrapper?
Iain Simpson

1
Я неправильно прочитал и отредактировал, пожалуйста, посмотрите еще раз. Поймите, contentчто промежуток - это не блочный элемент, поэтому никакие свойства ширины не изменят его. Вам нужно изменить ширину.wrapper
Скотт

22

Я использую div вместо таблиц и могу выбирать классы внутри основного класса, как показано ниже:

CSS

.main {
    .width: 800px;
    .margin: 0 auto;
    .text-align: center;
}
.main .table {
    width: 80%;
}
.main .row {
   / ***something ***/
}
.main .column {
    font-size: 14px;
    display: inline-block;
}
.main .left {
    width: 140px;
    margin-right: 5px;
    font-size: 12px;
}
.main .right {
    width: auto;
    margin-right: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: normal;
}

HTML

<div class="main">
    <div class="table">
        <div class="row">
            <div class="column left">Swing Over Bed</div>
            <div class="column right">650mm</div>
            <div class="column left">Swing In Gap</div>
            <div class="column right">800mm</div>
        </div>
    </div>
</div>

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

.main #red {цвет: красный; }

<div class="main">
    <div class="table">
        <div class="row">
            <div id="red" class="column left">Swing Over Bed</div>
            <div class="column right">650mm</div>
            <div class="column left">Swing In Gap</div>
            <div class="column right">800mm</div>
        </div>
    </div>
</div>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.