CSS에서 이전 배경 덮어 쓰기

그래서 문제가 있으며 CSS 규칙에 대한 나의 이해가 부족할 수 있다고 생각합니다. 바라건대 너희들이 나를 도울 수 있기를!CSS에서 이전 배경 덮어 쓰기

span.medback { 
background-color: FFFFCC; 
} 
span.hiback { 
background-color: FF3333; 
} 
span.item1 { 
display: block; 
background-color:#DCF0F7; 
width: 75px; 
height: 58px; 
border: 1px solid #000000; 
float: left; 
padding: 5px; 
text-align: center; 
} 
span.item2 { 
display: block; 
background-color:#DCF0F7; 
width: 70px; 
height: 58px; 
border: 1px solid #000000; 
float: left; 
padding: 5px; 
text-align: center; 
} 
span.item3 { 
display: block; 
background-color:#DCF0F7; 
width: 90px; 
height: 58px; 
border: 1px solid #000000; 
float: left; 
overflow: auto; 
padding: 5px; 
} 
span.item4 { 
display: block; 
background-color:#DCF0F7; 
width: 170px; 
height:48px; 
border: 1px solid #000000; 
float: left; 
overflow: auto; 
padding: 10px; 
} 
span.item5 { 
display: block; 
background-color: #DCF0F7; 
width: 80px; 
height:58px; 
border: 1px solid #000000; 
float:left; 
padding: 5px; 
} 
span.item6 { 
display: block; 
background-color: #DCF0F7; 
width: 30px; 
height: 58px; 
border: 1px solid #000000; 
float:left; 
padding: 5px; 
} 

span.item6 a img { 
width: 20px; 
height: 20px; 
} 
span.item1 a img { 
width: 20px; 
height: 20px; 
} 

span.item7 { 
display: block; 
background-color: #DCF0F7; 
width: 30px; 
height: 58px; 
border: 1px solid #000000; 
float:left; 
padding: 5px; 
}

용서 내 문제 내 질문은 왜 두 번째 리에서 hiback 클래스의 배경 색상을 무시하지 않는 것입니다

<ul id="sortable" class="mainlist"><li class="listwrap" id="arrange_69"><span class="item1 "><a class="checkmarked" href=""><img src="" title="check" alt="check" /></a></span> 
<span class="item2 ">&#x25B2; | &#x25BC;</span> 
<span class="item3 ">monkey</span> 
<span class="item4 "></span> 
<span class="item5 "></span> 
<span class="item6 "><a class="edit" href=""><img title="edit" alt="edit" src="" /></a></span> 
<span class="item7 "><a class="confirm" href=""><img title="Delete" alt="Delete"src="" /></a></span></li> 
<li class="listwrap" id="arrange_72"><span class="item1 hiback"><a class="checkmarked" href=""><img src="" title="check" alt="check" /></a></span> 
<span class="item2 hiback">&#x25B2; | &#x25BC;</span> 
<span class="item3 hiback">new</span> 
<span class="item4 hiback"></span> 
<span class="item5 hiback">Mar 25th 2014 12:30 PM</span> 
<span class="item6 hiback"><a class="edit" href=""><img title="edit" alt="edit" src="" /></a></span> 
<span class="item7 hiback"><a class="confirm" href=""><img title="Delete" alt="Delete"src="" /></a></span></li></ul>

의 아이디어를 얻기 위해 그 필요한 라인 - 매우 긴 CSS 다른 요소들? 그 기능을 얻을 수있는 방법이 있습니까? (모든 것을 다시 작성하는 것은 옵션으로 잘못 설계된 경우) 도움을 주셔서 감사합니다!

출처

2014-03-25 Jimbo

디버깅의 첫 번째 단계는 CSS를 확인하는 것이 었습니다. – cimmanon

첫 번째 문제는 이러한 색상에 대한 # 표시를해야한다는 것입니다 :

span.medback { 
    background-color: #FFFFCC; 
} 

span.hiback { 
    background-color: #FF3333; 
}

둘째, 당신은 항목 클래스의 정의 후 이러한 정의를 이동해야합니다.

바이올린 : http://jsfiddle.net/ybJGw/

출처

2014-03-25 16:16:48

감사합니다. 그래서 CSS 규칙에서, 그것은 html에서 마지막으로 이름 붙여진 것이 아닙니다. 그것의 CSS는 CSS에서 마지막으로 정의됩니다. 편집 - 처음부터 끝까지 바 꾸었습니다. (나의 뇌는 폭발 할 것입니다.) – Jimbo

@Jimbo 선언의 순서는 어떤 규칙이 다른 규칙 (다른 규칙들과 다른 것)을 덮어 쓰는지를 결정하는 규칙이기도합니다. 이것은 기본적인 CSS 지식입니다. –

아니요, Quentin의 답변 링크를 참조하십시오. 두 개의 선택기가 똑같이 특정 적이면, css에서 마지막으로 정의 된 셀렉터 중 하나입니다. 이것이 .item 정의가 .hiback이 선택되도록 허용 한 후에 .medback과 .hiback을 움직이는 이유입니다. –

때문에 다음 hiback 클래스

규칙 무효, 당신은 색상 코드
에서 # 누락 된 선택기 동일하게 specific
선택기입니다 동일하게 구체화되어 있으며, the last one gets applied last (이전보다 우선 함)

출처

2014-03-25 16:16:57 Quentin

CSS에서 이전 배경 덮어 쓰기

답변

관련 문제