여러 스타일 시트로 인한 CSS 선택기 특수성 충돌

Question

좋아, 나는 stackoverflow CSS 선택기를 통해 읽었습니다. 스레드에서 here이 구문의 차이점은 무엇입니까?^=는 무엇을 의미합니까? 무엇을 선택합니까? 모든? 참고 : 같은 단순한 선택의 반복 occurrances이 허용와 특이도를 증가 할

[class^='Rating'] 

및

div.Rating0_5 

또한, 읽는 문 here있다.

그 의미는 무엇입니까?

웹 사이트에서 많은 CSS 코드를 정리해야하기 때문에 묻습니다. 각각 12 개가 넘는 스타일 시트가 200 개 이상의 코드 라인을 포함하고 있으며 스타일 시트간에 스타일을 오버라이드하고 있습니다. 스타일 시트를 통해 줄을 서서 특정 클래스, div 등이 오버 라이딩하고 특이성의 일부가 깊이있는 7 개의 셀렉터라는 것을 알아내는 것은 매우 힘듭니다! 나에게는 거의 불가능하며 매우 스트레스가 많습니다.

다른 스타일을 덮어 쓰는 스타일을 타겟팅하는 데 사용할 수있는 도구가 있습니까? 사용하기 쉽고 정확히 무엇을합니까? 그렇지 않다면 매우 긴 선택자를 사용하지 않고도 고유성을 보장하여 다른 스타일 시트 규칙으로 덮어 쓰지 않고도 충분한 구체성을 가지고 CSS를 작성할 수 있습니까?

감사합니다. 나는 이것이 어떤 의미가 있고 누군가가이 경험을했기를 바랍니다.

Answer 1

^=은 (는) CSS 선택자에 대해 "시작합니다"입니다. 귀하의 경우 "등급"으로 시작하는 이름을 가진 클래스에 적용됩니다.

전통적인 CSS를 사용하면 정말 긴 셀렉터를 특정하게 만들어야하며,이 문구를 사용하면 중복 셀렉터가있을 수 있으며 스타일이 결합된다는 것을 의미한다고 생각합니다.

CSS 정리의 관점에서 자동화 도구에 대한 좋은 제안은 없지만 선택자의 변수 및 상속을 수행하는 CSS 위에 더 나은 구문 계층을 사용하려면 http://sass-lang.com/ (SCSS)을 살펴보십시오. . CSS를 많이 정리합니다.