[CSS] 디자인 - 적용이 안될 시 우선순위 파악하기

예를들어 다음 html 코드에서 input type="password" 부분에 내가 css를 적용하고 싶을때

h3나 table로 적용되지 않고, .label로도 적용되지 않아 매우 난감했는데

 

<tr>
            		<td width="100" colspan="1">
            			<h3 align="left">password</h3>
            		<input type="password" name="pw" style="label">
            	</td>
            	<tr>

input[type="text"], 
input[type="password"] {
  border:solid 1px #6e8efb ;
  border-radius: 4px;
  padding: .3em .7em;
}

 

 

input시에도 안되던게 input[type="text"]로 되더라구요!

 

이 경우는 input시 css적용이 따로 되기 때문입니다.

같은 태그이면서 타입에 따라 완전히 모양이 달라서 각각 스타일을 지정해야하기 때문에 발생합니다.

input[type=타입] { 
  /* 스타일 내용 */
}

 

이와같이 따로 명령문이 있더라도 

선택자 {속성: 속성값 !important; } 을 해주면 우선순위를 무시하고 적용이 가능합니다.

 

더불어 우선순위에 대해 알아보자면,

- 인라인 스타일(inline style) > 내부 스타일(internal style) > 외부스타일(external style) > 기본값

- 같은 우선순위일때 부모 자식 관계가 더 많거나 가장 마지막으로 적용한 것이 우선된다.

- 이 우선순위 값을 계산해서 가장 높은 점수에 우선순위를 부여한다.

 

다음과 같습니다.

우선순위가 총 계산 값으로 지정되기 때문에 CSS 충돌이 일어날시 혼동이 올 수 있겠네요....

 

더 자세한 설명은 참조사이트를 참고해주세요!

 

https://ofcourse.kr/css-course/%EC%A0%81%EC%9A%A9-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84

CSS 적용 우선순위 - ofcourse