아이 범위의 테두리 부모 DIV의 경계를 무시

Question

나는 다음과 같이 중첩 탭의 행이 사업부가 있습니다

<div class="container"> 
    <div class="menu"> 
     <span class="tab" /> 
     <span class="activetab" /> 
     <span class="tab" /> 
    </div> 
</div> 

탭이 활성화되어

, 우리는 주위에 테두리를 표시 할 필요를 . container div에도 테두리가 있습니다. 그러나, 그것은 더 가벼울 필요가있다. 따라서 우리는 다음과 같이 있습니다

.container {border: 1px solid lightgray;} 
.activetab {border: 1px solid gray;}

컨테이너가 활성 탭의 부모이기 때문에, 국경이 우선 순위가 보인다,하지만 우리는 활성 탭의 어두운 테두리 대신 표시 할. 우리는 경계선과 윤곽선을 모두 시험해 보았습니다.

도움말!

Answer 1

우선, html 태그의 클래스 이름 앞에 점을 넣는 이유를 모르겠다 고 생각하십니까? CSS에 <div class="container">과 같이 표시되고 그 다음에 .container{....}처럼 보입니다. 당신의 CSS에서 다음

<div class="container"> 
    <ul class="menu"> 
    <li>Item 1</li> 
    <li class="activetab">Item 2</li> 
    <li>Item 3</li> 
    </ul> 
</div> 

하고, 같은 :

.container {border: 1px solid lightgray;} 
.container ul{list-style:none;} 
.container li{float:left;} 
.container li.activetab {border: 1px solid gray;} 

당신이 다음 CSS 메뉴를 만들려고 노력하고 난 당신이 정렬되지 않은 목록을 사용하는 것이 좋습니다 싶다면

꽤 표준 이잖아

Answer 2

귀하의 주요 문제는 귀하의 클래스 속성입니다. 넣지 마십시오. HTML에서 :

<div class=".container"> 

는 그 후

<div class="container"> 

을 할 경우, 당신은 border-color 값에 문제가 없어야합니다. 선택자가 명시 적이거나 일반이 아닌 이상 혼동이 없어야합니다.

.container { border:1px solid red; } 
.activetab { border:1px solid green; } 

제대로 렌더링해야합니다. 그러나 클래스에는 접두어가 붙습니다. (점)을 HTML에서가 아니라 선택기에 표시합니다.