Targetkan kelas css di dalam kelas css lain


91

Hai, Saya mengalami masalah dengan beberapa kelas css di joomla. Saya memiliki dua div dalam satu modul, satu adalah kelas pembungkus = "pembungkus", yang lainnya adalah kelas konten = "konten". Konten ada di dalam pembungkus. Apa yang saya coba lakukan adalah menargetkan gaya css pada kelas konten. Biasanya saya hanya akan meletakkan .content {info gaya saya} di lembar gaya, tetapi masalahnya adalah bahwa kelas ini digunakan beberapa kali di seluruh halaman. Jadi di backend, Anda dapat menetapkan nama kelas ke modul, jadi saya menyebutnya .testimonials.

Agar saya tidak mengubah semua kelas konten lain di halaman, saya mencoba menargetkannya dengan meletakkan ini:

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

tetapi tidak berhasil, saya tahu Anda dapat melakukan ini dengan div, jadi

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

tetapi pertanyaan saya adalah apakah ini dapat dilakukan dengan kelas?, jika demikian, ada yang salah saat saya mencoba menggunakan yang berikut ini:

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

karena untuk beberapa alasan konten tidak membungkus dan menghilang begitu saja dari halaman di akhir paragraf, jadi saya mencoba memastikan kelas tingkat 1 konten duduk tidak tumpang tindih apa pun, yang aneh adalah bahkan jika saya perbaiki kelas div konten berada hingga 50px itu masih tidak akan membungkus teks, jadi saya tidak yakin apakah saya menargetkannya kan?.

edit >>>>>>>>>> ..

HTML yang dibuat Joomla pada dasarnya terlihat seperti ini >>

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

kemudian dibungkus dengan jutaan div lainnya dengan gaya Joomla lama yang bagus.

Saya telah memberikan modul kelas testimonial, jadi akhirnya terlihat seperti:

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

EDIT 3 >>>>>>> OK, ini yang dimuntahkan

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

Inilah yang dilakukannya

masukkan deskripsi gambar di sini


Nah, sampai Anda menunjukkan mark-up HTML yang relevan, kami sama sekali tidak tahu apa yang Anda targetkan ...
David berkata, aktifkan kembali Monica

Hai, ini tidak mungkin karena html dibuat oleh joomla itu sendiri, bagiannya dari modul umpan berita yang dibangun saya coba ubah
Iain Simpson

Begitu? Biarkan itu merender halaman, lalu 'lihat sumber' dan salin / tempel kutipan yang relevan dari sumbernya. Tanpa sesuatu untuk dilihat, kami hanya meraba-raba dalam kegelapan, dan itu tidak konstruktif untuk jawaban yang sebenarnya dan saya harus memilih untuk menutup sebagai 'bukan pertanyaan nyata.' Yang lebih baik tidak saya lakukan, jika ada kesempatan untuk benar-benar membantu Anda.
David mengatakan mengembalikan Monica

ok, selesai, kelas konten pada dasarnya berjalan, alih-alih membungkus, jadi menghilang dari layar, bahkan jika saya memperbaiki lebar menjadi 300px yang merupakan seberapa besar induknya
Iain Simpson

Jawaban:


115

Tidak yakin seperti apa HTML itu (itu akan membantu dengan jawaban). Jika itu

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

lalu cukup hapus spasi di css Anda. A la ...

.testimonials.content { css here }

MEMPERBARUI:

Oke, setelah melihat HTML lihat apakah ini berfungsi ...

.testimonials .wrapper .content { css here }

atau hanya

.testimonials .wrapper { css here }

atau

.desc-container .wrapper { css here }

semua 3 harus bekerja.


terima kasih saya akan mencobanya, saya akan memposting beberapa html, tetapi ini dihasilkan oleh Joomla, jadi hanya memiliki satu juta file php
Iain Simpson

hmm ini benar-benar aneh, jika saya meletakkan .content hanya dengan sendirinya, lalu meletakkan 300px semuanya di halaman dengan konten kelas berubah menjadi 300px, selain dari hal yang ingin saya ubah, pada pemeriksaan lebih lanjut dengan firebug kelasnya juga konten , jadi saya tidak tahu apa yang menyebabkannya, saya pikir saya mungkin harus mengemas situs dan mengunggahnya jadi tunjukkan semua orang sebagai itu pada pemasangan lokal di mo.
Iain Simpson

Setidaknya kita perlu melihat sedikit HTML. Mungkin bukan keseluruhan halaman, tapi setidaknya bagian yang relevan.
Scott

Saya mencoba cara di atas, tetapi tetap tidak berhasil, bungkusnya adalah kelas, jadi bukankah seharusnya .wrapper?
Iain Simpson

1
Saya salah membaca dan sudah mengedit, silakan lihat lagi. Sadarilah bahwa contentmenjadi span bukanlah elemen blok sehingga tidak ada jumlah properti lebar yang akan mengubahnya. Anda perlu mengubah lebar.wrapper
Scott

22

Saya menggunakan div dan bukan tabel dan saya dapat menargetkan kelas dalam kelas utama, seperti di bawah ini:

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>

Jika Anda ingin memberi gaya "sel" tertentu secara eksklusif, Anda dapat menggunakan sub-kelas lain atau id dari div misalnya:

.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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.