it-swarm.dev

Başka bir css sınıfı içindeki bir css sınıfını hedefleyin

Merhaba joomla'daki bazı css sınıfları ile ilgili problemler yaşıyorum. Bir modülde iki div var, biri wrapper class = "wrapper", diğeri content class = "content". İçerik sarıcı içindedir. Yapmaya çalıştığım, içerik sınıfında bir css stilini hedeflemektir. Genellikle sadece .content {stil bilgilerimi} stil sayfasına koyardım, ama sorun bu sınıfın sayfa boyunca birkaç kez kullanılması. Yani arka uçta, bir modüle bir sınıf adı atayabilirsiniz, ben de buna .testimonials adını verdim.

Sayfadaki diğer tüm içerik sınıflarını değiştirmemek için şunu koyarak hedeflemeyi deniyorum:

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

ama işe yaramıyor, bunu divs ile yapabileceğini biliyorum.

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

ama benim sorum şu, bu sınıflarla yapılabilir mi? Eğer öyleyse, aşağıdakileri kullanmaya çalıştığım gibi bir şeyler yanlış gidiyor:

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

bir nedenden ötürü, içeriğin kaydırılmadığı ve paragrafın sonunda sayfadan tamamen silindiği için, içeriğin oturduğu 1. seviye sınıfın hiçbir şeyle çakışmadığından emin olmaya çalışıyorum; div sınıfı, içeriğin hala 50px'e oturur, metni hala kaydırmaz, bu yüzden doğru bir şekilde hedef alıp almadığımdan emin değilim.

düzenle >>>>>>>>>> ..

Html Joomla yaratıyor temelde bu gibi görünüyor >>

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

daha sonra eski Joomla tarzında bir milyon div daha sarılı.

Modüle referansları sınıfını verdim, bu yüzden şöyle bir şeye bakıyor:

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

EDIT 3 >>>>>>> Tamam, tükürdüğü şey bu

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

EDIT 4 >>>>>>

Bu ne yapıyor

enter image description here

69
Iain Simpson

HTML'in neye benzediği belli değil (bu, cevaplara yardımcı olacaktır). Eğer öyleyse

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

daha sonra sadece css'inizdeki boşluğu kaldırın. A la ...

.testimonials.content { css here }

GÜNCELLEME:

Tamam, HTML’i gördükten sonra bunun işe yarayıp yaramadığını görün ...

.testimonials .wrapper .content { css here }

ya da sadece

.testimonials .wrapper { css here }

veya

.desc-container .wrapper { css here }

her 3 çalışmalı.

82
Scott

Tablolar yerine div kullanıyorum ve ana sınıftaki sınıfları aşağıdaki gibi hedefleyebiliyorum:

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>

Belirli bir "hücreyi" özel olarak stillendirmek istiyorsanız, div'in başka bir alt sınıfını veya kimliğini kullanabilirsiniz.

. main #red {color: 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>
20
Jason Ebersey