레일즈 애플리케이션 스타일 시트 오류

아래 코드를 입력하면 application.css 파일에 오류가 발생합니다. h1.title 코드는 실행되지만 h1 코드는 실행되지 않습니다. 내 응용 프로그램에서 h1.title이 h1보다 위에 있다는 것을 언급 할 가치가 있습니다. 그러나 h1.title 코드 바로 뒤에 h1 코드를 삽입하면 작동하도록 할 수 있습니다 (h1 코드 조각으로 반복). 내 코드 DRY를 유지하고 싶으면이 작업을 수행하고 싶지 않습니다. 이것은 사소한 것처럼 보이지만 나는 그것으로 상당히 씨름을했고 진전을 보이지 않았다.레일즈 애플리케이션 스타일 시트 오류

h1 { 
color: maroon; 
font-size: 150%; 
font-style: italic; 
display: block; 
width: 100%; 
border-bottom: 1px solid DarkSlateGrey; 
} 
h1.title { 
margin: 0 0 1em; 
padding: 10px; 
width: 98.5%; 
background-color: orange; 
color: white; 
border-bottom: 4px solid gold; 
font-size: 2em; 
font-style: normal; 
}

출처

2012-05-24 Anconia

정확히 작동하지 않는 기능은 무엇입니까? H1 코드는 내가 설정 한 jsfiddle 예제에서 잘 실행됩니다. http://jsfiddle.net/TRKkj/1/ – afaf12

방금 코드를 scaffold.css.scss 파일로 옮겼습니다. 완벽하게 실행됩니다. 내가 보지 못하는 범위 문제가 있습니까? 왜 scaffold.css.scss에서 실행되지만 application.css에서는 실행되지 않는지 이해할 수 없습니다. – Anconia

브라우저의 검사기에서 요소를 살펴보십시오. h1 요소가 다른 파일에서 상속받은 요소입니까? – badams

코드를 application.css에 직접 추가하면 컴파일 된 파일의 맨 위에 나타납니다 (CSS 파일이 컴파일 된 것으로 가정). 내 생각 엔 당신의 application.css에 포함 된 다른 css 파일들이 h1 css 속성을 덮어 쓰는 것입니다.

브라우저 (IE, Firefox, Chrome 등)에 inspect 옵션을 사용하고 h1이 속성 값을 가져 오는 위치를 확인하십시오.

출처

2012-05-24 23:12:19 afaf12

둘 다 요소 본문을 상속하지만 거기에 h1 및 h1.title 코드를 취소해야하는 것이 없습니다. 또한 application.css의 두 요소는 h1과 h1.title입니다. 내 앱은 여전히 매우 작습니다. – Anconia

body, h1 및 h1.title을 모두 application.css로 옮겼습니다. 이제 완벽하게 실행됩니다. application.css가 처음으로 준수하기 때문에 의미가 있습니다. app-wide 코드를 지금부터 application.css에 배치해야합니까, 아니면 scaffold.css.scss를 그대로 두어도 괜찮습니까? – Anconia

application.css를 깔끔하게 유지하기 위해 앱 전체 코드를 별도의 .css 파일에 넣었습니다. 일반적으로 css 코드는 application.css에 있어야하며 js 및 application.js도 마찬가지입니다. – afaf12

레일즈 애플리케이션 스타일 시트 오류

답변

관련 문제