다른 CSS 클래스 내의 CSS 클래스를 대상으로 지정


90

안녕하세요, joomla의 일부 CSS 클래스에 문제가 있습니다. 모듈에 두 개의 div가 있습니다. 하나는 wrapper class = "wrapper"이고 다른 하나는 content class = "content"입니다. 내용은 래퍼 안에 있습니다. 내가하려는 것은 콘텐츠 클래스의 CSS 스타일을 대상으로하는 것입니다. 일반적으로 스타일 시트에 .content {my style info}를 넣지 만 문제는이 클래스가 페이지 전체에서 여러 번 사용된다는 것입니다. 따라서 백엔드에서 모듈에 클래스 이름을 할당 할 수 있으므로 이것을 .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 단계 클래스가 아무것도 겹치지 않도록 노력하고 있습니다. 이상한 것은 수정하더라도 콘텐츠가 50px에 들어가는 div 클래스는 여전히 텍스트를 래핑하지 않으므로 올바르게 타겟팅하고 있는지 확실하지 않습니다.

편집 >>>>>>>>>> ..

Joomla가 만드는 HTML은 기본적으로 다음과 같습니다. >>

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

그런 다음 좋은 오래된 Joomla 스타일로 백만 개의 다른 div로 포장됩니다.

모듈에 평가 클래스를 주었으므로 다음과 같이 보입니다.

<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 마크 업을 보여줄 때까지 우리 는 당신이 무엇을 목표로 삼고 있는지 전혀 모릅니다 ...
David는 Monica를 복원한다고 말합니다.

html로는 Joomla를 자체적으로 생성 안녕 그것의 불가능, 뉴스 피드 모듈 메신저에서 빌드의 그 부분을 변경하려고
이안 심슨

그래서? 페이지를 렌더링 한 다음 '소스보기'및 소스에서 관련 발췌 부분을 복사 / 붙여 넣기합니다. 없이 뭔가 우리가 어둠 속에서 모색하고 볼, 그리고 실제 답을 건설 아니다 나는 가까이에 투표 할 것 '이 아니라 진짜 문제.' 실제로 당신을 도울 수있는 기회가 있다면별로하지 않겠습니다.
다윗은 분석 재개 모니카 말한다

좋아, 수행, 내용 클래스는 기본적으로, 대신 포장의에 실시하고 그래서 나는 부모가 얼마나 큰 300 픽셀의 폭을 수정하는 경우에도, 화면 밖으로 사라진다
이안 심슨

답변:


114

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 개 모두 작동합니다.


덕분에 나는 갈이, 내가 그렇게 만 만 PHP 파일이 일부 HTML을 게시,하지만 줌라에 의해 생성 한 것을 줄 것이다
이안 심슨

흠 이건 정말 이상합니다. .content를 직접 넣은 다음 클래스 콘텐츠가 300px로 변경된 페이지의 모든 것을 300px로 변경하고 변경하려는 항목을 제외하고 방화범을 사용한 추가 검사에서 해당 클래스도 콘텐츠입니다. , 그래서 지금은 그 원인이 무엇인지 전혀 알지 못합니다. 사이트를 포장하고 업로드해야 할 수 있으므로 모든 사람이 모에 로컬 설치에 있음을 보여줍니다.
Iain Simpson

적어도 우리는 실제로 약간의 HTML을 볼 필요가 있습니다. 아마도 전체 페이지가 아니라 적어도 관련 섹션 일 것입니다.
스콧

위의 작업을 시도했지만 여전히 진행되지 않습니다. 래퍼는 클래스이므로 .wrapper가 아니어야합니까?
Iain Simpson

1
잘못 읽고 편집했습니다. 다시 봐주세요. 실현 content스팬 되 width 속성에는 그 양을 변경 예정되지 않도록 블록 요소는 아니다. 당신의 폭을 변경해야합니다.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의 ID를 사용할 수 있습니다. 예 :

.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>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.