한 클래스에만 CSS를 적용하는 방법은 무엇입니까?

Question

CSS

#inchannel li{ 
      width:179px; 
      height:40px; 
      margin:0px 0px 0px 0px; 
      padding:0px 0px 0px 0px; 
      font-size:17px; 
      color:#999999; 
      background:url(img/green.png) no-repeat 8% 50%,url(img/back_line.png); 

     } 

     .ichn0{ 
      width:179px; 
      height:123px; 
      margin:0px 0px 0px 0px; 
      padding:0px 0px 0px 0px; 
      font-size:17px; 
      color:#999999; 
      background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%; 

     } 

HTML은

<ul id="accordion"> 

<li> 
    <a href="#" class="item category" rel="category"></a> 
    <ul id="inchannel"> 
    <li class="ichn0"><img src="facebook/41403_1434825607_37944358_q.jpg"></li> 
     <li><img src="facebook/48983_615523712_8495_q.jpg"></li> 
     <li><img src="facebook/41621_717814907_4472_q.jpg"></li> 
    </ul> 
</li> 

</ul> 

나는 단지 하나 개의 클래스에 CSS를 적용 할하지만 inchannel CSS를 모두 커버처럼 보이는 하나 개의 클래스에 적용되지 않습니다. 어떤 몸이라도 한 클래스에만 CSS를 적용하는 방법을 알려줄 수 있습니까? 아무 생각하세요? 감사합니다.

Answer 1

사용 높은 특이성

#inchannel li.ichn0{ 
     width:179px; 
     height:123px; 
     margin:0px 0px 0px 0px; 
     padding:0px 0px 0px 0px; 
     font-size:17px; 
     color:#999999; 
     background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%; 

    } 

Answer 2

#inchannel li는 클래스 .ichno 탐 specificity 훨씬 더 있습니다.

이 대처하는 방법은 여러 가지가 있습니다.

• 추가! 중요한 이것은 나쁜 관행이 .ichn0

의 속성 화면 판독기 같은 것들에 사용되는이 같은 사용자 스타일 시트, 등을 덮어 쓸 수 있기 때문에

• 첫 번째 li에 ID를 추가하십시오.

괜찮 았지만 개인적으로는 그럴 수 없습니다.

• #inchannel : 첫 번째 아이는

이것은 내가 그것에 대해 갈 것 방법이다. 내 눈을 감안하면 여러 페이지에 걸쳐 유지하는 것이 가장 쉽습니다.

• 는 데이먼의 대답에 따라 클래스를 추가합니다. 이 방법 아무 문제 중 하나, 절대적

없습니다. 나는 단지 쑤셔 선구자 일 뿐이다.

Answer 3

• #inchannel li — 귀하의 경우, #inchannel 요소 (모두 내부의 모든 li 요소에 적용됩니다.

• .ichn0 —는 상관없이 내부에 어떤 요소의, ichn0 클래스와 li 요소에 적용됩니다. 이들 중 하나만 있습니다.

첫 번째 i .ichn0 CSS를 통해 전례를 복용들 때문에 CSS specificity입니다. #inchannel li 선택은 더 구체적이고, 따라서 덜 특정 .ichn0 설정을 재정의합니다. #inchannel li.ichn0에

Changein .ichn0 당신의 문제를 해결해야한다.