1. ホーム
  2. html

[解決済み] 別のCSSクラスの中にあるCSSクラスをターゲットにする

2022-03-05 17:17:49

質問

こんにちは、私はJoomlaのいくつかのCSSクラスで問題を抱えています。あるモジュールに2つのdivがあり、1つはwrapper class="wrapper"、もう1つはcontent class="content"です。コンテンツはラッパーの中にあります。私がやろうとしていることは、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クラスを50pxに修正しても、それはまだテキストをラップしませんので、私はそれを右ターゲットにしているかどうかわからない?

edit >>>>>>>> です。

Joomlaが作成しているhtmlは、基本的に以下のようなものです >>

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

をクリックすると、古き良きJoomlaのスタイルで、他の100万個のdivで包まれます。

このモジュールに testimonials というクラスを与えたので、最終的には以下のような感じになります。

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

EDIT 3 >>>>>>です。 OK、これが吐き出されるものです。

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

これは、それがやっていることです

解決方法は?

HTMLがどのようなものか定かではありません(それが答えの助けになるでしょう)。もし、それが

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

の場合、CSSでスペースを削除するだけです。ラ...

.testimonials.content { css here }

UPDATE

さて、HTMLを見た後、これがうまくいくかどうか......。

.testimonials .wrapper .content { css here }

または単に

.testimonials .wrapper { css here }

または

.desc-container .wrapper { css here }

の3つで動作するはずです。