DOM의 일부에 대해 스타일 리셋을 만드는 가장 좋은 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/334705

  •  22-07-2019
  •  | 
  •  

문제

내 컨트롤 만 대상으로하는 CSS 재설정을 만들려고합니다. 따라서 HTML은 다음과 같이 보입니다.

<body>
  <img class="outterImg" src="sadkitty.gif" />
  <div id="container" class="container">
    <img class="innerImg" src="sadkitty.gif" />
    <div class="subContainer">
      <img class="innerImg" src="sadkitty.gif" />
    </div>
  </div>
  <img class="outterImg" src="sadkitty.gif" />
</body>

CSS는 내가 문제가있는 것이지만 현재 이것으로 작업하고 있습니다.

img 
{
  // Bad style declarations for the entire page
  border: solid 3px red;  
  width: 50px;
}

.container img, .container div, .container etc.
{
  // Style reset for specific elements within my control "container"
  border: solid 3px blue;
  width: 100px;
}

.innerImg img
{
  // The target style for the specific class/element within the control
  border: solid 3px green;
  width: 200px;
}

문제는 ". innerimg img"가 예상대로 "ontainer img"를 비난하지 않는다는 것입니다. 그렇다면 "컨테이너"요소 내의 모든 요소의 스타일을 재설정 한 다음 해당 요소 내에 클래스에 스타일을 배치하는 가장 좋은 방법은 무엇입니까?

도움이 되었습니까?

해결책

선택기.innerImg imgIMG 요소를 나타냅니다 내부에 내부 클래스의 요소. 문서에는 그런 것이 없습니다.

당신이 아마 원하는 것은 img.innerImg .

그 외에도 짧은 계산이 있습니다 선택기 특이성 어떤 규칙을 따랐는지 결정합니다. (이 링크에는 모든 문서에 내가 좋아하는 예선이 포함되어 있습니다. "큰 기지가있는 숫자 시스템에서")

다른 팁

나는 이것이 당신이 원하는 것에 가까운 결과를 초래한다고 생각합니다. 

img  
{  
  border: solid 3px red;  
  width: 50px;  
}  
.container .innerImg, .container div  
{  
  border: solid 3px blue;  
  width: 100px;  
}  
.container .subContainer  
{  
  border: none;  
}  
.subContainer .innerImg  
{  
  border: solid 3px green;  
  width: 200px;  
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top