Призначте клас css всередині іншого класу css


91

Привіт, у мене проблеми з деякими класами css в joomla. У мене в модулі два div, один - клас обгортки = "обгортка", інший - клас вмісту = "вміст". Вміст знаходиться всередині обгортки. Що я намагаюся зробити, це націлити стиль css на клас вмісту. Зазвичай я просто вкладаю .content {my style info} у таблицю стилів, але проблема полягає в тому, що цей клас використовується кілька разів на всій сторінці. Отже, у бекенді ви можете призначити модулю назву класу, тому я назвав цей .testimonials.

Так що я не змінюю всі інші класи вмісту на сторінці, я намагаюся націлити його, поставивши це:

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

але це не працює, я знаю, ви можете зробити це за допомогою divs, отже

#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>

EDIT 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, його частину збірки модуля подачі новин я намагаюся змінити
Iain Simpson

Тому? Нехай він відображає сторінку, а потім "переглядає джерело" та копіює / вставляє відповідний уривок із джерела. Не маючи чогось побачити, ми просто намацаємо в темряві, і це не є конструктивним для реальних відповідей, і мені доведеться проголосувати, щоб закрити, як "не справжнє питання". Що я волів би не робити, якщо є шанс насправді допомогти вам.
Девід каже, відновити Моніку

ОК, зроблено, клас зміст в основному на проведення, а НЕ обгортку, так зникає з екрану, навіть якщо зафіксувати ширину в 300px , яка , наскільки велика його батько
Іен Сімпсон

Відповіді:


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-файлів
Iain Simpson

хмм, це дійсно дивно, якщо я сам розміщу .content, а потім розміщую 300px на сторінці зі змінами вмісту класу до 300px, крім того, що я хочу змінити, при подальшому огляді з 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.