CSS 선택기의 우선 순위는 무엇입니까?

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

  •  07-07-2019
  •  | 
  •  

문제

CSS 질문 : 두 개의 다른 선택기가 요소에 적용되면 누가 이기는가?

나는 이것이 일어나지 않아야한다는 것을 알고 있지만, 레거시 응용 프로그램을 조정하고 싶고 CSS가 중간에 있습니다.

도움이 되었습니까?

해결책

그만큼 gory 세부 사항 사양에서 실제로 합리적으로 읽을 수 있습니다. 요약해서 말하자면:

  1. !important 규칙과 인라인 style 규칙이 가장 많이 이깁니다.

  2. 그렇지 않으면 일반적으로 더 구체적인 승리. #id 보다 구체적인 선택기입니다 .classname 보다 구체적인 선택기입니다 tagname.

  3. 규칙이 똑같이 구체적인 경우, 마지막으로 선언 된 것은 마지막으로 승리합니다.

이것이 '일어나지 말아야 할 특별한 이유는 없습니다. 광범위한 브러시 규칙을 지정한 다음 하나의 사례를 대상으로하는 더 구체적인 규칙을 추가하는 것이 일반적입니다. 단일 요소에 대한 여러 동일한 속성 규칙은 비정상적이거나 바람직하지 않습니다.

다른 팁

#no of id = a, #no of class = b 및 #no of tag = c of class = c를 찾아야합니다.

가치가 높은 ABC가 승리합니다.

.wrapper .title  p {  
  //some other rules
}

A=0 B=2 C=1 =021

\#foo {
  // some more rules
}

A=1 = 100

.bar .head div li{
  // some more rules
}


A=0 B=2 C=2 =022

100>022>021

그래서 #foo가 승리합니다

일어날 것입니다! 그렇기 때문에 계단식 스타일 시트라고합니다. 우선 순위의 예를 찾을 수 있습니다 여기

참조 특이성 순서 사양의 섹션 (해당 장의 나머지 부분과 함께 중요한 규칙 및 규칙이 스타일 시트에 나타나는 순서도 영향을 미칩니다).

"#ID"는 ".class"이름과 ".class"보다 강력합니다. "태그"이름보다 강력합니다. 그러나 우리가 우선 순위보다 "! 중요한"을 적용하면 대부분의 것입니다.

  • !중요한
  • 인라인 스타일
  • ID
  • 수업
  • 꼬리표

셀렉터 간의 우선 순위는 자신이 얼마나 구체적인지에 의해 제어됩니다. 보다 구체적인 선택기는 덜 구체적으로 승리합니다.

두 명의 선택기가 똑같이 구체적이면 나중에 하나는 첫 번째 선택기를 이깁니다.

세 가지 수준의 특이성, ID, 클래스 및 요소가 있습니다. 그래서 #elem 이기는 .elem ID가 더 구체적입니다. .elem .cont 이기는 .elem 동일한 수준에 더 많은 선택기가 있습니다.

"갈등이 발생하면 어떻게 되는가?" ~에 selectUtorial.

CSS 파일의 순서는 선택기가 동일한 특이성을 공유하는 경우에만 중요합니다.

선택기 특이성에 대한 자세한 내용 :앤디 클라크 (Andy Clarke)는 그들이 어떻게 작동하는지에 대한 최고의 개요 인 특이성 전쟁을 썼다.

CSS는 계단식 스타일 시트. 이는 규칙이 계단식으로 요소에 적용됨을 의미합니다. 다른 선택기가 요소에 적용되는 것은 완벽하게 정상입니다. 예를 들어 다음과 같은 생각을합니다.

<div class="wrapper">
  <div id="foo" class="bar" style="some rules">Test</div>
</div>

다음 규칙은 "foo"요소에 영향을 미칩니다.

.wrapper {
  //some other rules
}

#foo {
  // some more rules
}

.bar {
  // some more rules
}

우선 순위에 대한 규칙을 찾을 수 있습니다 여기.

나는 항상 Firefox를 사용하는 것이 좋습니다 "개똥 벌레" 플러그인. 특정 요소에 대해 어떤 속성이 평가 될지 정확히 보여주고 캐스케이드 중에 재정의를 강조하는 이유를 보여줍니다.

  1. !중요한
  2. 인라인 스타일
  3. #ID
  4. 수업
  5. 꼬리표
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top