어떤 유형의 CSS 선택기가 작동할지 어떻게 예상 할 수 있습니까?
문제
Dojo와 함께 양식을 만들고 있으며 범위 제한 번호 입력 필드를 원합니다. 그래서 나는 이것을 사용합니다.
<input
id = "sample_input"
type = "text"
dojoType = "dijit.form.NumberTextBox"
name = "sample_input"
value = "27"
constraints = "{min:1,max:30,places:0}"
promptMessage = "Enter a value"
required = "true"
invalidMessage = "Invalid value."
/>
작동하지만 너무 넓고 내용은 좌절감을 느낍니다.
내 입력 요소에 추가 된이 라인 중 어느 것도 차이를 만드는 것처럼 보이지 않습니다.
width = "60"
text-align = "right"
그것은 그 자체로 질문이지만, 괜찮습니다. 나는 HTML 대신 CSS를 사용해야한다는 것을 알고 있습니다. 그래서 나는 이것을 헤드 섹션에 추가합니다.
<style type="text/css">
.NARROW {width:60px;}
.RIGHT_JUSTIFIED {text-align:right;}
</style>
그리고 이것은 입력 요소에 :
class = "NARROW RIGHT_JUSTIFIED"
그리고 그것은 너비를 해결하지만 텍스트 정당화는 아닙니다.
텍스트 정당화를 해결하려면 대신 다음을 수행해야합니다.
<style type="text/css">
.NARROW {width:60px;}
input {text-align:right;}
</style>
지정 width
속성 input
스타일도 작동하지 않습니다.
그래서 제 질문입니다. 이 경우 인라인 스타일이 작동하지 않는 이유는 무엇이며 왜 너비에 클래스 선택기를 사용해야하지만 텍스트 정상의 요소 선택기를 사용해야합니까? 어떤 선택기가 적용되는시기를 어떻게 예상 할 수 있습니까?
해결책
이 코드를 시도했는데 잘 작동하는 것 같습니다.
<html>
<head>
<style type="text/css">
.width_narrow {width:60px;}
.align_right {text-align:right;}
</style>
</head>
<body>
<input
name = "sample_input"
type = "text"
class = "width_narrow align_right"
id = "sample_input"
value = "27"
dojoType = "dijit.form.NumberTextBox"
constraints = "{min:1,max:30,places:0}"
promptMessage = "Enter a value"
required = "true"
invalidMessage = "Invalid value."
/>
</body>
</html>
다른 팁
클래스 선택기에 오타가 있습니다.
right_justified와 오른쪽 정당화는 일치하지 않습니다
선택기가 작동하지 않으면 문제를 격리하기 위해 몇 가지 빠른 테스트가 있습니다.
먼저 CSS의 다른 부분에있는 선택기가 스타일을 무시하고 있는지 확인하기 위해보다 구체적인 선택기를 시도해보십시오. 예를 들어,
body #problem { ... }
보다 구체적입니다
#problem { ... }
당신은 또한! 중요한 속성을 추가 할 수 있습니다.이 속성은 얼마나 더 구체적이든간에 다른 모든 속성보다 속성 우선 순위를 제공합니다.
#problem { width:60px !important; }
그 중 어느 것도 작동하지 않으면 더 깊은 문제 나 교활한 오타가 있습니다. 이 단계에서는 HTML 및 CSS 섹션을 완전히 분리하는 것이 가장 효과적이지만 시간이 많이 걸립니다.
사용 개똥 벌레 보다 구체적인 선택기 재정의가 있는지 확인하려면 .RIGHT_JUSTIFIED
.