어떤 유형의 CSS 선택기가 작동할지 어떻게 예상 할 수 있습니까?

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

  •  06-07-2019
  •  | 
  •  

문제

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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top